Skip to content
Simple global state for React with Hooks API
Branch: master
Clone or download
Latest commit f11045d Jun 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ fix test Jun 11, 2019
dist better error message (#21) Jun 15, 2019
examples example without error Jun 9, 2019
src better error message (#21) Jun 15, 2019
.eslintrc.json add hot-loader example Jun 2, 2019
.gitignore initial commit Oct 27, 2018
.travis.yml initial commit Oct 27, 2018
CHANGELOG.md v0.14.0 Jun 15, 2019
LICENSE v0.5.0 Jan 25, 2019
README.md add blog item Jun 1, 2019
package-lock.json v0.14.0 Jun 15, 2019
package.json v0.14.0 Jun 15, 2019
tsconfig.json CRA based examples Nov 19, 2018
webpack.config.js add hot-loader example Jun 2, 2019

README.md

react-hooks-global-state

Build Status npm version bundle size

Simple global state for React with Hooks API

Introduction

If you ever try to implement a global state with Context and Hooks, you probably find it straightforward. This library provide more or less the same functionality with some following bonuses.

  • Optimization for shallow state getter and setter.
    • The library cares the state object only one-level deep.
  • TypeScript type definitions
    • A creator function creates hooks with types inferred.
  • Redux middleware support to some extent
    • Some of libraries in Redux ecosystem can be used.
    • Redux DevTools Extension could be used in a simple scenario.

Due to the fact that this library utilizes unstable_observedBits for optimization, this library is still in alpha.

Install

npm install react-hooks-global-state

Usage

setState style

import React from 'react';
import { createGlobalState } from 'react-hooks-global-state';

const initialState = { counter: 0 };
const { GlobalStateProvider, useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [value, update] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => update(v => v + 1)}>+1</button>
      <button onClick={() => update(v => v - 1)}>-1</button>
    </div>
  );
};

const App = () => (
  <GlobalStateProvider>
    <Counter />
    <Counter />
  </GlobalStateProvider>
);

reducer style

import React from 'react';
import { createStore } from 'react-hooks-global-state';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, counter: state.counter + 1 };
    case 'decrement': return { ...state, counter: state.counter - 1 };
    default: return state;
  }
};
const initialState = { counter: 0 };
const { GlobalStateProvider, dispatch, useGlobalState } = createStore(reducer, initialState);

const Counter = () => {
  const [value] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <GlobalStateProvider>
    <Counter />
    <Counter />
  </GlobalStateProvider>
);

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02 03 04 05 06 07 08 09 10 11 12 13

Limitations

  • Due to the implementation relying on observedBits in the Context API, the performance may drop down if a state holds more than 31 items. Reference: #1

Blogs

Community Wiki

You can’t perform that action at this time.