A React.js global state manager with Hooks and Context API
npm install --save react-context-hook
Read the documentation of react-context-hook
:
Wrap your React App in the store Provider using the function withStore
.
import { withStore} from 'react-context-hook'
const initialState = { count: 10 }
const storeConfig = {
listener: state => {
console.log('state changed', state)
},
logging: true //process.env.NODE_ENV !== 'production'
}
export default withStore(App, initialState, storeConfig)
withStore
creates a React Context.Provider which wrap your application the value of the Provider is the store. The store is similar to a Javascript Map where you can put, read, and delete values by their key.
For example store.set('username', {name: 'spyna', email: '[email protected]'})
will set a username
key in the store map. Then you can read, modify or delete it from the map using store.get('username')
or store.remove('username')
.
The store is exported as store
from react-context-hook, so you can use it in the Components.
However for convenience, in React Components you can use the hooks exported from react-context-hook.
withStore - doc
useStore - docs
useStoreState - docs
useSetStoreValue - docs
useDeleteStoreValue - docs
useGetAndset - docs
useGetAndDelete - docs
useSetAndDelete - docs
useStoreValue - docs
MIT © Spyna