2.0.1 • Published 5 years ago
react-store-context v2.0.1
react-store-context
A simple store API using React Context
Installation
yarn add react-store-context
Peer Dependencies
Make sure React 16, at version 16.3.0 or higher, is installed alongside react-store-context.
Rationale
- ✅ The simplest global state management solution for React ^16.3.0
- ✅ One package with zero dependencies
- ✅ 59 lines of source code
- ✅ TypeScript support included
Example Usage
import * as React from 'react';
import { render } from 'react-dom';
import { createStore, Provider } from 'react-store-context';
interface CheckboxProps {
checked: boolean;
label: string;
setChecked(checked: boolean): void;
}
const Checkbox: React.FunctionComponent<CheckboxProps> = props => {
return (
<label
style={{
display: 'block',
userSelect: 'none'
}}
>
<input
type='checkbox'
checked={props.checked}
onChange={() => {
props.setChecked(!props.checked);
}}
style={{
marginRight: 8,
}}
/>
{props.label}
</label>
);
};
const storeA = createStore({
checked: false,
});
const storeB = createStore({
checked: false,
});
const App: React.FunctionComponent = () => {
return (
<Provider stores={[storeA, storeB]}>
<storeA.Consumer>
{({ state, setState }) => {
return (
<Checkbox
checked={state.checked}
label='Store A'
setChecked={checked => {
setState({
checked,
});
}}
/>
);
}}
</storeA.Consumer>
<storeB.Consumer>
{({ state, setState }) => {
return (
<Checkbox
checked={state.checked}
label='Store B'
setChecked={checked => {
setState({
checked,
});
}}
/>
);
}}
</storeB.Consumer>
</Provider>
);
};
render(<App />, document.getElementById('root'));
Development with Storybook
yarn storybook
TODO
- Add API documentation.
- Add a React Hooks API.