Higher-Order Component for subscribing to containers.
Simplifies your components, removing the need to constantly use the Subscribe
component.
$ npm install --save unstated-with-containers
import * as React from 'react';
import {Container} from 'unstated';
import withContainers from 'unstated-with-containers';
class CounterContainer extends Container {
state = { value: 0 };
increment = () => {
this.setState({ value: this.state.value + 1 });
}
decrement = () => {
this.setState({ value: this.state.value - 1 });
}
}
const App = withContainers ( CounterContainer )(
({ containers: [counter] }) => ( // props.containers[0] === props.container
<>
<p>{counter.state.value}</p>
<button onClick={counter.increment.bind ( counter )}>Increment</button>
<button onClick={counter.decrement.bind ( counter )}>Decrement</button>
</>
)
);
- unstated-connect2: Connect containers to components, without sacrificing performance.
- unstated-hmr: Preserve containers' states across Hot-Module-Replacements.
- unstated-compose: Compose multiple containers into one.
- unstated-compose-suspense: Add suspend/unsuspend support to
unstated-compose
. - unstated-compose-suspense-middleware: Add middlewares support to
unstated-compose-suspense
. - unstated-suspense: Suspend/unsuspend updates propagation from your containers.
- unstated-suspense-middleware: Add middlewares support to
unstated-suspense
.
MIT © Fabio Spampinato