Getting Started with React Signify

React Signify is a simple library that provides features for managing and updating global state efficiently. It is particularly useful in React applications for managing state and auto-syncing when their values change.

Advantages of the library

• Lightweight library - Minimal footprint with maximum performance
• Simple syntax - Easy-to-learn API that makes state management intuitive
• Supports effective re-render control - Optimal performance with selective updates

Project Information

• 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

pnpm

pnpm add react-signify

Overview

Initialize

You can initialize Signify in any file, please 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

The usage is simple with the export/import tool of the module.

File Store.js (export Signify):

import { signify } from 'react-signify';

export const sCount = signify(0);

Component A (import Signify):

import { sCount } from './store';

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

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

Basic Features

Display on the interface

We will use the html attribute to display the value as a string or number 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() {
  const handleSet = () => {
    sCount.set(1)
  }
  
  const handleUp = () => {
    sCount.set((pre) => pre.value += 1)
  }
  
  return (
    <div>
      <h1>{sCount.html}</h1>
      <button onClick={handleSet}>Set 1</button>
      <button onClick={handleUp}>UP 1</button>
    </div>
  );
}

Pressing the button will change the value of Signify and will be automatically updated on the interface.

What's Next?

• Learn about core concepts
• Compare React Signify vs other libraries
• Explore advanced features
• Check out the API reference
• Set up TypeScript support