- useStore
- useStoreState
- useSetStoreValue
- useDeleteStoreValue
- useGetAndset
- useGetAndDelete
- useSetAndDelete
- useStoreValue
- withStore
key
string The lookup key to find the saved value in the storedefaultValue
any The value if the value in the store is missingcreateIfMissing
boolean if true and the data is missing it will be created in the store
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. When used, this function return a promise that resolve nothing, thus you can use setValue('a value').then(() => {doSomething() //when the store did update})
position 2 - a function deleteValue to delete the value from the store. When used, this function return a promise that resolve nothing, thus you can use deleteValue('a value').then(() => {doSomething() //when the store did update})
Returns the whole store value, with all the variables stored in it. Changes to this object will not change the store
import {useStoreState} from 'react-context-hook'
const store = useStoreState()
console.log('the store is', JSON.stringify(store))
Returns object An object representing the whole store value in read only mode.
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.
key
string the name of the variable to set in the store
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 When used, this function return a promise that resolve nothing, thus you can use setValue('a value').then(() => {doSomething() //when the store did update})
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.
key
string the name of the variable to set in the store
import {useDeleteStoreValue} from 'react-context-hook'
const deleteUsername = useDeleteStoreValue('username')
<button onClick={()=> deleteUsername('my_username')}>set username</button>
Returns Function a function to delete a variable in the store with the given name. When used, this function return a promise that resolve nothing, thus you can use deleteValue('a value').then(() => {doSomething() //when the store did update})
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.
key
string The lookup key to find the saved value in the store
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. When used, this function return a promise that resolve nothing, thus you can use setValue('a value').then(() => {doSomething() //when the store did update})
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.
key
string The lookup key to find the saved value in the store
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. When used, this function return a promise that resolve nothing, thus you can use deleteValue('a value').then(() => {doSomething() //when the store did update})
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.
key
string The lookup key to find the saved value in the store
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. When used, this function return a promise that resolve nothing, thus you can use setValue('a value').then(() => {doSomething() //when the store did update})
position 1 - a function deleteValue to delete the data in the store. When used, this function return a promise that resolve nothing, thus you can use deleteValue('a value').then(() => {doSomething() //when the store did update})
key
string the name of the variable / value to be retrieved in the global store.defaultValue
any? an optional default value, if the value in the global store is not present.
Returns any the value on the global store, or the default value if passed, or undefined
WrappedComponent
ReactElement the component to connect with the storeinitialValue
Object the initial store value or nothingconfig
Object the custom configuration. If nothing is passed will use the default config
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)