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).