Skip to content

Latest commit

 

History

History
263 lines (173 loc) · 8.73 KB

DOCS.md

File metadata and controls

263 lines (173 loc) · 8.73 KB

Table of Contents

useStore

Parameters

  • key string The lookup key to find the saved value in the store
  • defaultValue any The value if the value in the store is missing
  • createIfMissing boolean if true and the data is missing it will be created in the store

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. 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})

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 object An object representing the whole store value in read only mode.

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 When used, this function return a promise that resolve nothing, thus you can use setValue('a value').then(() => {doSomething() //when the store did update})

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('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})

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

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. When used, this function return a promise that resolve nothing, thus you can use setValue('a value').then(() => {doSomething() //when the store did update})

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. When used, this function return a promise that resolve nothing, thus you can use deleteValue('a value').then(() => {doSomething() //when the store did update})

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. 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})

useStoreValue

Parameters

  • 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

withStore

Parameters

  • WrappedComponent ReactElement the component to connect with the store
  • initialValue Object the initial store value or nothing
  • config Object the custom configuration. If nothing is passed will use the default config
    • config.listener Function a function that is triggered each time the store is modified.
    • config.proxyStore boolean default true - if true the store will be protected by a Proxy. Set to false if your environment does not support Proxy. If you use react-context-hook in the browser set it to true

Examples

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)