Resets the state to the given input.
(Object)
the new value to reset the state to.
Sets the specified key in the store. This function is equivaluent to the useSetStoreValue hook.
delete the specified key from the store. This function is equivaluent to the useDeleteStoreValue hook.
(string)
the property to set in the store
any:
the global state value of the store
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.
(string)
The lookup key to find the saved value in the store
(T?)
The value if the value in the store is missing
array:
an array with length 3:
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 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.
(string)
the name of the variable to set in the store
Function:
a function to set a variable in the store with the given name
import {useSetStoreValue} from 'react-context-hook'
const setUsername = useSetStoreValue('username')
<button onClick={()=> setUsername('my_username')}>set username</button>
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.
(string)
the name of the variable to set in the store
Function:
a function to delete a variable in the store with the given name.
import {useDeleteStoreValue} from 'react-context-hook'
const deleteUsername = useDeleteStoreValue('username')
<button onClick={()=> deleteUsername()}>set username</button>
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.
(string)
The lookup key to find the saved value in the store
(T?)
The default value if missing
array:
an array with length 2:
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')
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.
(string)
The lookup key to find the saved value in the store
array:
an array with length 2:
import {useGetAndDelete} from 'react-context-hook'
const [username, deleteUsername] = useGetAndDelete('username')
<div>hello {username}</div>
<button onClick={()=> deleteUsername('my_username')}>set username</button>
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.
(string)
The lookup key to find the saved value in the store
array:
an array with length 2:
import {useGetAndDelete} from 'react-context-hook'
const [username, deleteUsername] = useGetAndDelete('username')
<div>hello {username}</div>
<button onClick={()=> deleteUsername('my_username')}>set username</button>
(string)
the name of the variable / value to be retrieved in the global store.
(T?)
an optional default value, if the value in the global store is not present.
Returns the whole store value, with all the variables stored in it. Changes to this object will not change the store
Record:
object:
An object representing the whole store value in read only mode.
import {useStoreState} from 'react-context-hook'
const store = useStoreState()
console.log('the store is', JSON.stringify(store))
This store can be used outside of React components.
Type: Function
void:
(ReactElement)
the component to connect with the store
(Object?)
an Object that will be the initial store value, or nothing
(Object?)
the custom configuration. If nothing is passed, the default config will be used.
| Name | Description |
|---|---|
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
|
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)