Overview

An elegant state management solution for React. The philosophy of this project is to keep the core simple and scalable by exposing low-level accessibility and middleware composition, not by adding options. All the non-core functions are just examples of how you can compose functions to achieve common features.

Features

• Non-opinionated: Like useState, only one core function, others are built on top of it.
• Type safe: The state is type safe and the return value is intuitive.
• Global: The state is global, you can access it anywhere.
• Scalable: Naturally scale large state into multiple modules and files without performance degradation.
• Middlewares: Simple and type-safe middleware composition interface.
• Tiny: About 0.3KB Minified + Gzipped.

Documentation

Get started

npm install create-global-state

import create from "create-global-state";

const [useCount, setCount] = create(0);

const inc = () => setCount((c) => c + 1);

export default function App() {
  return <button onClick={inc}>Count {useCount()}</button>;
}

Examples

Check the Counter for basic usage, or try it online.

Check the CounterPersistent, MonolithStore, TodoApp for more advanced usage.

FAQ

Why not use react-use's createGlobalState?

Its implementation is not type safe and the return value is not intuitive. It's too late to make a PR to change its interface.

Why not zustand?

The typescript support is not good enough, the API is not intuitive. create-global-state is more like useState which aligns with the react API style. Check the comparison. Zustand Slices Pattern can cause naming conflict issues. create-global-state can naturally scale states by modules and files. The setter of zustand must be called within a react component, while the setter of create-global-state can be called anywhere.