DOCS.md

Table of Contents

• reset
  • Parameters
• set
  • Parameters
• delete
  • Parameters
• getState
• listernerMiddleware
• useStore
  • Parameters
  • Examples
• useSetStoreValue
  • Parameters
  • Examples
• useDeleteStoreValue
  • Parameters
  • Examples
• useGetAndSet
  • Parameters
  • Examples
• useGetAndDelete
  • Parameters
  • Examples
• useSetAndDelete
  • Parameters
  • Examples
• useStoreValue
  • Parameters
• useStoreState
  • Examples
• rawStore
• ConfigListener
  • Parameters
• withStore
  • Parameters
  • Examples

reset

Resets the state to the given input.

Parameters

• state Object the new value to reset the state to.

set

Sets the specified key in the store. This function is equivaluent to the useSetStoreValue hook.

Parameters

• key string the property to set in the store
• value Object the value of the property

delete

delete the specified key from the store. This function is equivaluent to the useDeleteStoreValue hook.

Parameters

• key string the property to set in the store

getState

Returns any the global state value of the store

listernerMiddleware

Meta

• deprecated: Use listenerMiddleware

useStore

useStore is a React Hook that access a value stored in the application global store. It returns the value, a function to update it (like React.useState) and a function to delete it.

Parameters

• key string The lookup key to find the saved value in the store
• defaultValue T? The value if the value in the store is missing

Examples

import {useStore} from 'react-context-hook'
const [username, setUsername, deleteUsername] = useStore('username')
<div>hello {username}</div>
<button onClick={()=> setUsername('my_username')}>set username</button>

Returns array an array with length 3:
position 0 - the value of the data in the store.
position 1 - a function setValue to modify the data in the store.
position 2 - a function deleteValue to delete the value from the store.

useSetStoreValue

Returns a function to set or update a variable in the store. You want to use this hook when you just need to modify the store, not read or delete a value from it.

Parameters

• key string the name of the variable to set in the store

Examples

import {useSetStoreValue} from 'react-context-hook'
const setUsername = useSetStoreValue('username')
<button onClick={()=> setUsername('my_username')}>set username</button>

Returns Function a function to set a variable in the store with the given name

useDeleteStoreValue

Returns a function to delete a variable in the store. You want to use this hook when you just need to delete a value in the store, not read or set a value from it.

Parameters

• key string the name of the variable to set in the store

Examples

import {useDeleteStoreValue} from 'react-context-hook'
const deleteUsername = useDeleteStoreValue('username')
<button onClick={()=> deleteUsername()}>set username</button>

Returns Function a function to delete a variable in the store with the given name.

useGetAndSet

This React hook returns an array to read and modify a value in the store: const [value, setValue] = useGetAndSet('a_lookup_key_in_the_store'). The name of the variable in the arry is arbitrary and you can choose any string you like.

Parameters

• key string The lookup key to find the saved value in the store
• defaultValue T? The default value if missing

Examples

import {useGetAndSet} from 'react-context-hook'
const [username, setUsername] = useGetAndSet('username')
<div>hello {username}</div>
<button onClick={()=> setUsername('my_username')}>set username</button>

 const [value, setValue] = useGetAndSet('a_lookup_key_in_the_store')

Returns array an array with length 2:
position 0 - the value of the data in the store.
position 1 - a function setValue to modify the data in the store.

useGetAndDelete

This React hook returns an array to read and delete a value in the store: const [value, deleteValue] = useGetAndDelete('a_lookup_key_in_the_store'). The name of the variable in the arry is arbitrary and you can choose any string you like.

Parameters

• key string The lookup key to find the saved value in the store

Examples

import {useGetAndDelete} from 'react-context-hook'
const [username, deleteUsername] = useGetAndDelete('username')
<div>hello {username}</div>
<button onClick={()=> deleteUsername('my_username')}>set username</button>

Returns array an array with length 2:
position 0 - the value of the data in the store.
position 1 - a function deleteValue to delete the data in the store.

useSetAndDelete

This React hook returns an array to set and delete a value in the store: const [setValue, deleteValue] = useGetAndDelete('a_lookup_key_in_the_store'). The name of the variable in the arry is arbitrary and you can choose any string you like.

Parameters

• key string The lookup key to find the saved value in the store

Examples

import {useGetAndDelete} from 'react-context-hook'
const [username, deleteUsername] = useGetAndDelete('username')
<div>hello {username}</div>
<button onClick={()=> deleteUsername('my_username')}>set username</button>

Returns array an array with length 2:
position 0 - a function setValue to modify the data in the store.
position 1 - a function deleteValue to delete the data in the store.

useStoreValue

Parameters

• key string the name of the variable / value to be retrieved in the global store.
• defaultValue T? an optional default value, if the value in the global store is not present.

useStoreState

Returns the whole store value, with all the variables stored in it. Changes to this object will not change the store

Examples

import {useStoreState} from 'react-context-hook'
const store = useStoreState()
console.log('the store is', JSON.stringify(store))

Returns Record

Returns object An object representing the whole store value in read only mode.

rawStore

This store can be used outside of React components.

ConfigListener

Type: Function

Parameters

• state Object
• key string
• prevValue any
• nextValue any

Returns void

withStore

Parameters

• WrappedComponent ReactElement the component to connect with the store
• initialValue Object? an Object that will be the initial store value, or nothing
• config Object? the custom configuration. If nothing is passed, the default config will be used.
  • config.listener ConfigListener a function that is triggered each time the global state is modified. This function takes these parameters: (state, key, prevValue, nextValue). state is the value of the new state, key is the key that changed, prevValue is the old value of the key, nextValule is the new one.
  • config.logging boolean default false - if true it will log changes to console

Examples

const initialState = { count: 10 }

const storeConfig = {
 listener: (state, key, prevValue, nextValue) => {
console.log(`the key "${key}" changed in the store`)
console.log('the old value is', prevValue)
console.log('the current value is', nextValue)
console.log('the state is', state)
},
 logging: process.env.NODE_ENV !== 'production'
}

export default withStore(App, initialState, storeConfig)