Introduction

React Signify is a simple library that provides efficient management and updating of global state. It is particularly useful in React applications for managing state and synchronizing when their values change.
Advantages of the library:

Compact library
Simple syntax
Efficient re-render control support

Project Information

Website : [https://reactsignify.dev]
Git: https://github.com/VietCPQ94/react-signify
NPM: https://www.npmjs.com/package/react-signify

Installation

React Signify is available as a package on NPM for use with React applications:

# NPM
npm install react-signify

# Yarn
yarn add react-signify

Overview

Initialize

You can initialize Signify in any file, refer to the following example

import { signify } from 'react-signify';

const sCount = signify(0);

Here we create a variable sCount with an initial value of 0.

Used in many places

Simple to use with module export/import tool.
Component A (export Signify)

import { signify } from 'react-signify';

export const sCount = signify(0);

export default function ComponentA() {
  return (
    <div>
      <h1>{sCount.html}</h1>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

Component B (import Signify)

import { sCount } from './ComponentA';

export default function ComponentB() {
  return (
    <div>
      <h1>{sCount.html}</h1>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

From here we can see the flexibility of Signify, simple declaration, and usage everywhere.

Basic feature

Display on the interface

We will use the html attribute to display the value on the interface.

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
  return (
    <div>
      <h1>{sCount.html}</h1>
    </div>
  );
}

Update value

import { signify } from "react-signify";

const sCount = signify(0);

export default function App() {
  return (
    <div>
      <h1>{sCount.html}</h1>
      <button onClick={() => sCount.set(1)}>Set 1</button>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP 1</button>
    </div>
  );
}

Pressing the button will change the value of Signify and automatically update it on the interface.

Advanced feature

Use

Feature that allows to get the value of Signify and use it as a component state.

import { useEffect } from "react";
import { signify } from "react-signify";

const sCount = signify(0);

export default function App() {
  const countValue = sCount.use();

  useEffect(() => {
    console.log(countValue);
  }, [countValue]);

  return (
    <div>
      <h1>{countValue}</h1>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

watch

Feature that allows to track the value changes of Signify safely.

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
  sCount.watch((newValue) => {
    console.log(newValue);
  }, []);
  return (
    <div>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

Wrap

Feature to apply the value of Signify in a specific interface area.

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
  return (
    <div>
      <sCount.Wrap>
        {(value) => (
          <div>
            <h1>{value}</h1>
          </div>
        )}
      </sCount.Wrap>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

Hardwrap

Feature to apply the value of Signify in a UI area and restrict unnecessary re-renders when the parent component re-renders.

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
  return (
    <div>
      <sCount.HardWrap>
        {(value) => (
          <div>
            <h1>{value}</h1>
          </div>
        )}
      </sCount.HardWrap>
      <button onClick={() => sCount.set((pre) => pre += 1)}>UP</button>
    </div>
  );
}

reset

Tool to restore the default value.

import { signify } from 'react-signify';

const sCount = signify(0);

sCount.reset()

Blog

Managing Global State in React with React Signify

Cat Developer