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.