1.0.0 • Published 5 years ago
hooksy v1.0.0
use-state-shared
Create custom useState
hook that can be used inside multiple components and will share state across all of them (and will update all of them if state is changed)
API
import { createSharedStateHook } from 'use-state-shared';
// create custom `useState` hook and set default value only once.
export const customUseState = createSharedStateHook(0);
// later import `customUseState` anywhere in the app
// use the same way as `useState` inside multiple different components.
// `currentState` will be always synced between all of them.
// changing it in any component will cause change in every component using it with updated value
const [currentState, setState] = customUseState();
Example
import { createSharedStateHook } from 'use-state-shared';
// create custom state hook with some initial value
// such hook can be created in some separated file and imported to many different components
const useGlobalCount = createSharedStateHook(0);
const useAnotherGlobalCount = createSharedStateHook(0);
function ComponentA() {
const [globalCount, setGlobalCount] = useGlobalCount();
const [anotherGlobalCount] = useAnotherGlobalCount();
return (
<div>
I'm first component and count is {globalCount}. 2nd count is{' '}
{anotherGlobalCount}.
<button onClick={() => setGlobalCount(globalCount + 1)}>Increase</button>
</div>
);
}
function ComponentB() {
const [globalCount, setGlobalCount] = useGlobalCount();
const [anotherGlobalCount, setAnotherGlobalCount] = useAnotherGlobalCount();
return (
<div>
I'm second component. Count is {globalCount}. This count will always be
synced with ComponentA count.
<button onClick={() => setGlobalCount(globalCount - 1)}>Decrease</button>
<button onClick={() => setAnotherGlobalCount(anotherGlobalCount + 1)}>
Increase 2nd count
</button>
</div>
);
}
1.0.0
5 years ago