Context Store
A simple React global state management solution using Context and Custom Hooks.
Install
$ npm install @thefrontend/contextstore
Usage
makestore
// src/store.js const initialState = message: 'Hello World' const useStore Provider =
Provider
Wrap your App in the provider component.
// src/index.js ReactDOM
The Provider component has a single prop initialState
which is spread into the object passed into makeStore
. So any properties with the same name will be overwriten.
// src/index.js const mergeWithState = anotherMessage: 'Hello Universe' ReactDOM
useStore
Access your global store with the useStore
hook.
In a Component.
// src/components/App.js const App = { const state setState = const handleChange = return <div> <h1>statemessage</h1> <input type="text" onChange=handleChange /> </div> }
In a Custom Hook.
// src/hooks/useMessage.js const useMessage = { const state setState = const message = const setMessage = const handleMessage = return setMessage handleMessage message }
Then in a component call the useMessgage
hook. This keeps your logic seperated from your view component.
// src/components/App.js const App = { const handleMessage message = return <div> <h1>message</h1> <input type="text" onChange=handleMessage /> </div> }