Manage your react state with a simple context hook creator.
# yarn
yarn add create-context-state
# pnpm
pnpm add create-context-state
# npm
npm install create-context-state
Create a context and provider with built in setters and getters.
import { createContextState } from 'create-context-state';
const [CountProvider, useCount] = createContextState(({ set, get }) => ({
defaultValue: 0,
value: 0,
increment: () => set((state) => ({ value: state.value + 1 })),
decrement: () => set((state) => ({ value: state.value - 1 })),
reset: () => get('value') !== get('defaultValue'),
}));
const App = () => {
return (
<CountProvider>
<Counter />
</CountProvider>
);
};
const Counter = () => {
const { value, increment, decrement, reset } = useCount();
return (
<>
<span>{value}</span>
<button onClick={() => increment()}>+</button>
<button onClick={() => decrement()}>-</button>
<button onClick={() => reset()}>reset</button>
</>
);
};