A light react state manager based on React Hooks.
You can use states across multiple react components.
npm i @necolo/react-state
It's very simple to use it in React hooks
import { Provider, createModel } from '@necolo/react-state';
// create your model
const CounterModel = createModel(function() {
const [value, setValue] = useState(1);
function increase () {
setValue(value + 1);
}
return {
value,
increase,
};
});
// Registry model at the top component
function App () {
return <Provider model={CounterModel}>
<SubPage />
</Provider>
}
// use model in sub component
function SubPage () {
const counter = CounterModel.use();
return <div>
count: {counter.value}
<button onClick={counter.increase}>increase</button>
</div>;
}
Models also accepts initial values
function CounterModel(initValue) {
const [value, setValue] = useState(initValue);
return { value, setValue };
}
function App() {
// put initial value to args
return <Provider model={CounterModel} args={1}>
<SubPage />
</Provider>
}
function SubPage () {
const counter = CounterModel.use();
return <div>
count: {counter.value}
<button onClick={counter.increase}>increase</button>
</div>;
You can also use it in old react classes
import { Consumer, withModel } from '@necolo/react-state';
// use consumer in class to visit models
class SubClassPage extends React.Component {
public render () {
return <Consumer model={CounterStore}>
{(counter) => <div>{counter.value}</div>}
</Consumer>;
}
}
// or use HOC to wrap class and visit models from props
const SubClassPage2 = withModel({counter: CounterStore}, class extends React.Component {
public render () {
const counter = this.props.counter;
return <div>{counter.value}</div>;
}
})
You can use Providers
to register multiple models without nested them as hell.
import { Providers } from '@necolo/react-state';
function App () {
return <Providers models={[
{ model: CounterModel },
{ model: SomeOtherModel, args: {}, memo: true }, // with more configs
]}>
<SubPage />
</Providers>
}
// it's same as
function App() {
return <Provider model={CounterModel}>
<Provider model={SomeOtherModel} args={{}} memo>
<SubPage />
</Provider>
</Provider>
}