restatable v0.0.23

restatable

Simplify your global state in React

Why?

React state management is great, but as soon as you start dealing with global state, it can get messy. With Restatable, you can skip the ceremony around state management frameworks like Redux and keep using React like you always have; let Restatable take care of the rest.

Usage

Install using your favorite package manager

yarn add restatable

Create a Restatable store

import Restatable from 'restatable';

const theme = new Restatable({
  // set default state
  type: 'dark',
  highContrast: false,
});

export default theme;

Connect your stores to your component

import React, { PureComponent } from 'react';
import classNames from 'classnames';

import theme from '../restatables/theme';
import ContrastButton from '../components/ContrastButton';

class App extends PureComponent {
  constructor(props) {
    super(props);
    // connect your component
    theme.connect(this);
  }

  componentWillUnmount() {
    // disconnect when you're done
    theme.disconnect(this);
  }

  render() {
    // read state like normal
    const { type, highContrast } = this.state;

    return (
      <div className={classNames(type, highContrast && 'high-contrast')}>
        <ContrastButton />
      </div>
    );
  }
}

export default App;

Read this.state and use this.setState() like normal

import React, { PureComponent } from 'react';

import theme from '../restatables/theme';

class ContrastButton extends PureComponent {
  constructor(props) {
    super(props);
    theme.connect(
      this,
      // select only the keys you need
      ['highContrast'],
    );
  }

  componentWillUnmount() {
    theme.disconnect(this);
  }

  render() {
    const { highContrast } = this.state;

    return (
      <button
        onClick={() => {
          // and set state like normal
          this.setState(state => ({
            highContrast: !state.highContrast,
          }));
        }}
      >
        Turn high contrast {highContrast ? 'off' : 'on'}
      </button>
    );
  }
}

See the test cases for more in depth usage.