React hooks for state management
usestore is a library for managing state in React applications.
Here is the demo.
npm i @kennarddh/react-usestore
import React from 'react'
import { useStore, StoreProvider } from '@kennarddh/react-usestore'
const SubSubComponent = () => {
const [Store] = useStore('test-store')
return <p>SubSubComponent: {Store?.data}</p>
}
const SubComponent = () => <SubSubComponent />
const Component = () => {
// Create a store
// Pass true to third argument to store in localstorage
// Key in localstorage is 'react_usestore__{storeName}'
useStore('test-store', { data: 'dataForSubSubComponent' })
return <SubComponent />
}
const App = () => {
return (
<StoreProvider>
<Component />
</StoreProvider>
)
}
export default App
import React from 'react'
import { useStore, StoreProvider } from '@kennarddh/react-usestore'
const WithStoreProvider = WrappedComponent => {
const Wrapper = () => (
<StoreProvider>
<WrappedComponent />
</StoreProvider>
)
return Wrapper
}
const SubSubComponent = () => {
const [Store] = useStore('test-store')
return <p>SubSubComponent: {Store?.data}</p>
}
const SubComponent = () => <SubSubComponent />
const Component = () => {
useStore('test-store', { data: 'dataForSubSubComponent' })
return <SubComponent />
}
const App = () => <Component />
export default WithStoreProvider(App)
import React from 'react'
import {
useStore,
StoreProvider,
WithStoreConsumer,
} from '@kennarddh/react-usestore'
class SubSubComponent extends React.Component {
render() {
const { Store } = this.props['test-store']
return <p>{Store?.data}</p>
}
}
const WrappedSubSubComponent = WithStoreConsumer(SubSubComponent, 'test-store')
const SubComponent = () => <WrappedSubSubComponent />
const Component = () => {
useStore('test-store', { data: 'dataForWrappedSubSubComponent' })
return <SubComponent />
}
const App = () => {
return (
<StoreProvider>
<Component />
</StoreProvider>
)
}
export default App