About this package
useSharedState is a simple hook that can be used to share state between multiple React components.
It relies on EventTarget, and as such is only currently supported in browsers. There is a line of code to disable it for SSR environments.
Table of Contents
Installation
This package can be installed via npm, using :
npm i @scaleup-consulting/use-shared-state
Dependencies:
react >= v16.8.0
Usage
Creating a shared state
Creating a shared state hook is no different than creating a simple react hook:
//sharedStates.js
import { SharedStateTarget } from "@scaleup-consulting/use-shared-state";
...
//declare the shared state with an initial value
export const SHARED_COUNTER = new SharedStateTarget(0);
...Manipulating the state
To use and manipulate the shared state function similar to react hook syntax:
const [state, setState] = SHARED_STATE_NAME.useSharedState();Usage in counter example:
//CounterButtons.jsx
...
import {SHARED_COUNTER} from "./sharedStates"
...
export function CounterButtons() {
//get shared state and it's setter
const [count, setCount] = SHARED_COUNTER.useSharedState();
//use setter function to change the state's value
return (
<div>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
}
...Using the state
You can also subscribe to state's updates without using the setter function with
const [state] = SHARED_STATE_NAME.useSharedState();Usage in counter example:
//Counter.jsx
...
import {SHARED_COUNTER} from "./sharedStates"
...
export function Counter() {
//use shared state without setter
const [count] = SHARED_COUNTER.useSharedState();
//display state
return <span>{count}</span>;
}
...Best Practices
- To make the Shared State easier to debug, there should be only one component responsible for setting the state.
Examples
More examples can be found at useSharedState-examples repository.