@zoontek/react-global-state

Simple & minimalistic React global state management that works.

Installation

$ npm install --save @zoontek/react-global-state
# --- or ---
$ yarn add @zoontek/react-global-state

Motivation

TODO

Usage

// states/count.ts
import { createState, createHook } from "@zoontek/react-global-state";

const count = createState(0);

const {
  // State API
  addListener,
  getState,
  setState,
  resetState,
} = count;

export const useCount = createHook(count);

// You can derive values using the second argument
export const useCountPlusOne = createHook(count, (count) => count + 1);

export const decrement = () => setState((prevState) => prevState - 1);
export const increment = () => setState((prevState) => prevState + 1);

import { decrement, increment, useCount } from "./states/count.ts";

const Counter = () => {
  const count = useCount();

  return (
    <div>
      <span>count: {count}</span>

      <button onClick={decrement}>-1</button>
      <button onClick={increment}>+1</button>
    </div>
  );
};