@gitbook/unstated
Simple state library for react application. It is based on unstated by James Kyle.
Installation
$ yarn add @gitbook/unstated
Usage
import { Container, useUnstated } from '@gitbook/unstated';
class Counter extends Container<{
count: number
}> {
state = {
count: 0
};
increment() {
this.setState({ count: this.state.count + 1 });
}
decrement() {
this.setState({ count: this.state.count - 1 });
}
}
function Counter() {
const counter = useUnstated(Counter);
return (
<div>
<button onClick={() => counter.decrement()}>-</button>
<span>{counter.state.count}</span>
<button onClick={() => counter.increment()}>+</button>
</div>
);
}
render(
<Provider>
<Counter />
</Provider>,
document.getElementById('root')
);API
useUnstated
import { useUnstated } from '@gitbook/unstated';
useUnstated(
C: ContainerConstructor,
shouldUpdate?: (C: Container) => any
): ContainerHook to access a container and update the compontent each time the state is updated.
The shouldUpdate function can be used to prevent update of your component for certain updates of state. The result of the function will be shallowly compare to previous result.
useContainer
import { useContainer } from '@gitbook/unstated';
useContainer(
C: ContainerConstructor
): ContainerSimilar to useUnstated but the component is not updated when the state is updated. You can use this hook to access actions to modify the container.
Credits
This module is based on unstated. It started as a fork to add support for hooks.