@open-tech-world/react-state NPM

React State

A shared state management library for React.

Features

Simple API
No context providers
Components are re-rendered only when the selector value changes
It can shallow diff custom selector objects
It supports async actions
TypeScript support

Installation

Using npm

npm install @open-tech-world/react-state

Using Yarn

yarn add @open-tech-world/react-state

Usage

import { createState } from '@open-tech-world/react-state';

const useAppState = createState({});

function App() {
  const [state, setState] = useAppState((s) => s, { set: true });
  console.log(state);

  return (
    <>
      <button onClick={() => setState((s) => ({ obj: value }))}>
        Change State
      </button>
    </>
  );
}

Usage (TypeScript)

import { createState } from '@open-tech-world/react-state';

interface AppState {
  obj1: type1;
  obj2: type2;
}

const appState: AppState = { obj1: value, obj2: value };

const useAppState = createState(appState);

function App() {
  const [state, setState] = useAppState((s) => s, { set: true });
  console.log(state);

  return (
    <>
      <button onClick={() => setState((s) => ({ obj1: newValue }))}>
        Change State
      </button>
    </>
  );
}