region

react-react along with region-vanilla provide a way to manage global context. Supports React, NextJS, Node, Vanilla. You can use it while using any current solution. (Such as useState、createContext、redux、recoil、mobx、jotai)

English | 中文

Get Started

• install

npm i region-react

• Build your Component above region

import {createRegion} from 'region-react';

const region = createRegion<string>('initialValue');

const handleChange = e => region.set(e.target.value);

const Component = () => {
    const value = region.useValue();
    return <input value={value} onChange={handleChange} />;
};

• Fetching data with region

import {createRegion} from 'region-react';

const region = createRegion<User>();

const loadUser = region.loadBy(asyncFuncion);

// call loadUser in application lifecycle
loadUser({userId: 1});

const Component = () => {
    const value = region.useValue();
    const loading = region.useLoading();
    const error = region.useError();

    // ...
    return <div>{value}</div>;
}

Docs

Document And Best Practices

Migrate Guide

ChangeLog

Request for Comments

Contribute

Feel free to raise issues and PR.