React Signify

Introduction

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
• Simple syntax
• Supports effective re-render control

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

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.

Advanced features

Use

The feature allows retrieving the value of Signify and using it as a state of the component.

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
    const countValue = sCount.use();
    const handleUp = () => {
        sCount.set(pre => {
            pre.value += 1;
        });
    };

    return (
        <div>
            <h1>{countValue}</h1>
            <button onClick={handleUp}>UP</button>
        </div>
    );
}

watch

The feature allows for safe tracking of the value changes of Signify.

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
    const handleUp = () => {
        sCount.set(pre => {
            pre.value += 1;
        });
    };

    sCount.watch(value => {
        console.log(value);
    });

    return (
        <div>
            <button onClick={handleUp}>UP</button>
        </div>
    );
}

Wrap

The feature applies the value of Signify in a specific interface area.

import { signify } from 'react-signify';

const sCount = signify(0);

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

Hardwrap

The feature applies the value of Signify in a specific interface area and limits unnecessary re-renders when the parent component re-renders.

import { signify } from 'react-signify';

const sCount = signify(0);

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

reset

A tool that allows restoring the default value. Helps free up resources when no longer in use.

import { signify } from 'react-signify';

const sCount = signify(0);

sCount.reset();

See more

• Reference API
• Render & Update
• Usage with TypeScript
• Devtool
• Style Guide
• Structure
• Understand Signify