https://github.com/imrdjai/usesync
A subscription based state management solution for React!
https://github.com/imrdjai/usesync
hook hooks react react-hook react-hooks react-state state state-management usesync
Last synced: 6 days ago
JSON representation
A subscription based state management solution for React!
- Host: GitHub
- URL: https://github.com/imrdjai/usesync
- Owner: iMrDJAi
- License: mit
- Created: 2021-01-22T21:23:54.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-01T08:32:05.000Z (over 3 years ago)
- Last Synced: 2025-08-27T17:56:17.638Z (6 months ago)
- Topics: hook, hooks, react, react-hook, react-hooks, react-state, state, state-management, usesync
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
***
# **useSync**
[](https://www.npmjs.com/package/usesync)
A subscription based state management solution for React!
***
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Notes](#notes)
- [License](#license)
## Installation:
Install the package from **npm**:
```bash
$ npm install usesync --save
```
Then simply require it:
```js
const { useSync, sync, storage } = require("usesync") // CJS
```
or
```js
import useSync, { sync, storage } from "usesync" // ESM
```
## Usage:
### useSync(id: string, initialValue?: any): any
This is the hook that you will use across your React components, it allows them to subscribe to a specific sync with the ID you give:
```js
const Component = () => {
useSync('hello')
return (
Hello World!
)
}
```
Subscribing to muiltiple syncs is possible, just call the hook multiple times with different IDs:
```js
const Component = () => {
useSync('id num 1')
useSync('id num 2')
return (
Hello World!
)
}
```
Updating sync IDs at runtime is allowed:
```js
const GreetUser = (id) => {
const user = getUser(id)
useSync(`Users ${id}`)
return (
Hello {user.firstName}!
)
}
```
To synchronize state in multiple components simply call the hook inside all of them and give the same ID:
```js
const ComponentA = () => {
const name = useSync('hello', 'World')
return (
Hello {name}! (A)
)
}
const ComponentB = () => {
const name = useSync('hello', 'World')
return (
Hello {name}! (B)
)
}
```
### sync(id: string, newValue?: any): void
The hook alone does nothing, to dispatch a sync you need to call this function, this will cause all the subscribed components to re-render. Here is an example:
```js
import React from 'react'
import ReactDOM from 'react-dom'
import useSync, { sync } from "usesync"
const ComponentA = () => {
useSync('Components')
return (
Random Number (A): {Math.random()}
)
}
const ComponentB = () => {
useSync('Components')
useSync('ComponentB')
return (
Random Number (B): {Math.random()}
)
}
const ComponentC = () => {
useSync('Components')
return (
Random Number (C): {Math.random()}
)
}
const App = () => {
const handleClick = () => {
sync('Components')
}
const handleClick2 = () => {
sync('ComponentB')
}
return (
re-render all
re-render component b
)
}
ReactDOM.render(, document.getElementById('app'))
```
Try it on [CodePen](https://codepen.io/imrdjai/pen/zYKQzqw)!
**New:** You may pass a sync value to this function, and access it from the subscribed components:
```js
import React from 'react'
import ReactDOM from 'react-dom'
import useSync, { sync } from "usesync"
const initialValue = Math.random()
const ComponentA = () => {
const randomNumber = useSync('Components', initialValue)
return (
Random Number (A): {randomNumber}
)
}
const ComponentB = () => {
const randomNumber = useSync('Components', initialValue)
return (
Random Number (B): {randomNumber}
)
}
const ComponentC = () => {
const randomNumber = useSync('Components', initialValue)
return (
Random Number (C): {randomNumber}
)
}
const App = () => {
const handleClick = () => {
sync('Components', Math.random())
}
return (
re-render all
)
}
ReactDOM.render(, document.getElementById('app'))
```
Try it on [CodePen](https://codepen.io/imrdjai/pen/WNMwvJx)!
### storage: Object
This is an optional object that is globaly available across your app, it can be used to store states for your componenets. Here is an example:
```js
import React from 'react'
import ReactDOM from 'react-dom'
import useSync, { sync, storage } from "usesync"
storage.randomNumber = Math.random()
const ComponentA = () => {
useSync('Components')
return (
Random Number (A): {storage.randomNumber}
)
}
const ComponentB = () => {
useSync('Components')
useSync('ComponentB')
return (
Random Number (B): {storage.randomNumber}
)
}
const ComponentC = () => {
useSync('Components')
return (
Random Number (C): {storage.randomNumber}
)
}
const App = () => {
const handleClick = () => {
storage.randomNumber = Math.random()
sync('Components')
}
const handleClick2 = () => {
storage.randomNumber = Math.random()
sync('ComponentB')
}
return (
re-render all
re-render component b
)
}
ReactDOM.render(, document.getElementById('app'))
```
Try it on [CodePen](https://codepen.io/imrdjai/pen/XWjwqxO)!
## Notes
Give this cool project a star ⭐! I will appreciate it ❤
[](https://github.com/iMrDJAi/useSync)
## License
[MIT](https://github.com/iMrDJAi/useSync/blob/master/LICENSE) © [iMrDJAi](https://github.com/iMrDJAi)