This content originally appeared on DEV Community and was authored by Cat Developer
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()
See more
This content originally appeared on DEV Community and was authored by Cat Developer
Cat Developer | Sciencx (2024-08-04T12:00:03+00:00) Managing Global State in React with React Signify. Retrieved from https://www.scien.cx/2024/08/04/managing-global-state-in-react-with-react-signify/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.