OPEN TECH FOUNDATION

React State

A global state manager for React.

View Demo | Documentation

Features

• Simple API
• Mutable State Updates
• No Context Providers
• Auto Shallow Diff Computed Props
• TypeScript Support

Installation

npm install @opentf/react-state

yarn add @opentf/react-state

pnpm add @opentf/react-state

bun add @opentf/react-state

Usage

import { create } from '@opentf/react-state';

const { useAppState, setAppState, api } = create({ count: 0 });

api.subscribe(console.log);

export default function App() {
  const count = useAppState((s) => s.count);

  return (
    <>
      <p>Count: {count}</p>
      <button
        onClick={() =>
          setAppState((s) => {
            s.count++;
          })
        }
      >
        Increment
      </button>
    </>
  );
}

Related

• @opentf/react-form - A simple form state manager for React.

• @opentf/react-sandbox - The CodeSandbox sandpack wrapper with additional features.

• @opentf/react-node-repl - The Node.js REPL in a React component.

• @opentf/std - An Extensive JavaScript Standard Library.

License

Copyright (c) 2021, Thanga Ganapathy (MIT License).