@open-tech-world/react-state

React State

⚡ by Open Tech World

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>
    </>
  );
}

Documentation

Please read the complete documentation at: https://react-app-state.pages.dev/

License

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