react-context-hook

A React.js global state manager with Hooks and Context API

Install

npm install --save react-context-hook

Documentation

Read the documentation of react-context-hook:

• Documentation in HTML format

• Documentation in Github MarkDown

Usage

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: 'me@spyna.it'}) 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.

Hooks

withStore - doc

useStore - docs

useStoreState - docs

useSetStoreValue - docs

useDeleteStoreValue - docs

useGetAndset - docs

useGetAndDelete - docs

useSetAndDelete - docs

useStoreValue - docs

License

MIT © Spyna