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: The core is about 0.3KB Minified + Gzipped.
• Devtools: Native devtools support.

Documentation

Get started

npm install stalo

import create from "stalo";

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.

More advanced examples:

• CounterPersistent
• MonolithStore
• TodoApp
• Devtools

All the examples can be viewed online.

To run the examples locally, clone the repo and run:

npm install
npm start

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. stalo is more like useState which aligns with the react API style. Check the comparison. Zustand Slices Pattern can cause naming conflict issues. stalo can naturally scale states by modules and files.