Create Scoped State for React

This tool makes it easy to create a scoped state for your React application. Given an initial state, createScopedState will return a Provider and a useState() hook for use anywhere in the app.

See Example below for details on the pattern, which was mostly designed to make asynchronous updates simpler, without requiring boilerplate calls to useEffect etc.

Demo

https://create-scoped-state.vercel.app/

Example

See Demo above.

1// state.ts
2// Create, export Provider and Hook
3export const [CountProvider, useCount] = createScopedState({ count: 0 });

1// index.ts
2// Import Provider and Hook
3import { CountProvider, useCount } from '../state';
4
5const CountView = () => {
6  // Read scoped state
7  const { count, updateState } = useCount();
8  return (
9    <div>
10      <p>
11        Count: <strong>{count}</strong>
12      </p>
13      {/* Update scoped state. */}
14      <button onClick={async () => updateState({ count: count + 1 })}>
15        Press Me
16      </button>
17    </div>
18  );
19};

The useCount() state is scoped to its closest provider. Below are two contexts, including one with two counters which share the same state (pressing the button increments both counters). See the Demo above for a more detailed example.

1const DemoContext: FC = () => {
2  return (
3    <div>
4      {/* Isolated counter. */}
5      <CountProvider>
6        <CountView />
7      </CountProvider>
8
9      {/* Two counters sharing a state separate from the first one.  */}
10      <CountProvider>
11        <CountView />
12        <CountView />
13      </CountProvider>
14
15    </div>
16  );
17};

User Guide

This project is a tszip package written in TypeScript with the latest ESNext syntax in src/ and compiled to ES module output in dist/.

Developing

To compile the project and watch for changes:

yarn dev

Building

To build the release package:

yarn build

Publish

To compile the release build and publish to NPM:

yarn publish