Thistate is a library to manage global states with custom React hooks.
To use thistate follow the documentation to the some methods.
Returns a statefull value and function to update it.
function useState<StateType>(initializer)
initializer
- Is a key or an observable state.
Create an state entry on the store.
function create<StateType>({ key, defaultValue }): StateListener<StateType>
key
- Is the key of the state.
defaultValue
- Is the initial value of the state.
First of all it is necessary to install the lib in your project with the following lines.
If you using npm
npm i thistate
If you using yarn
yarn add thistate
To use thistate is really simple, just use 2 functions, create
and useState
(from thistate import both).
First you should create a new state, for example:
const myStateListener = create({
key: 'myState',
defaultValue: 'myInitialValue'
})
Once created you can use the state anywhere in the application passing the state key. For example:
const [user, setUser] = useState('myState')
Or a StateListener
returned from the create
function.
const [user, setUser] = useState(myStateListener)
Take this simple example.
import * as Thistate from 'thistate'
const nameState = Thistate.create({
key: 'name',
defaultValue: ''
})
function App() {
return <>
<Display listen={nameState} />
<Input key='name' />
</>
}
function Input({ key }) {
const [value, setValue] = Thistate.useState(key)
return <input onChange={evt => setValue(evt.target.value)} value={value} />
}
function Display({ listen }) {
const [value] = Thistate.useState(listen)
return <h2>{value}</h2>
}
See the example above live in CodeSandbox: https://codesandbox.io/s/thistate-simple-example-23uns