Use shared state with namespace using react hook in your function components.
npm install --save @mirror/use-shared-state
https://codesandbox.io/s/zl814j09mp
import React from 'react'
import {useSharedState, createSharedState} from '@mirror/use-shared-state'
createSharedState('app', {
label : 'App'
})
createSharedState('other', 0)
const Child = () => {
const [appLabel, setAppLabel] = useSharedState('app')
const [sharedCnt, setSharedCnt] = useSharedState('other')
return (
<div>
<p>{sharedCnt}</p>
<div>
<button onClick={() => setSharedCnt(sharedCnt + 1)}>Inc</button>
</div>
<input value={appLabel.label} onChange={e => setAppLabel({label : e.target.value})} />
</div>
)
}
const App = () => {
const [appLabel, setAppLabel] = useSharedState('app')
return (
<div>
<h1>{appLabel.label}</h1>
<Child />
<Child />
</div>
)
}
export default App
createSharedState(namespace : string, initState : any) => void
Create a shared state associated to given namespace. If you call useSharedState(ns) with namespace that has not been created, an error will be thrown.
useSharedState(namespace : string) => [sharedState, setSharedState]
Return sharedState and its set function associated to the namespace.
MIT © yongzhi-chen