react-state-pool

This is a simple library to manage state in react applications. To avoid messing up state management, it aims to tackle only one issue is making global data become global state with a minimum number of APIs. All APIs are very easy to start with.

Installation

1yarn add react-state-pool

Or

1npm install react-state-pool

Features

• Small size and simple APIs
• Fully type supported
• Subscribe and unsubscribe to state update dynamicaly

Quickstart

It requires two steps to use this library

1. Initialize a state pool where global data is stored by using initStatePool
2. Use usePoolState hook to use data stored in state pool as global state inside component

1import {initStatePool} from 'react-state-pool';
2
3const inititalData = {count: null};
4const myPool = initStatePool(initialdata);
5
6// Use disabled argument to subcribe and unsubcribe to state update dynamically
7function Playground(props) {
8  const [count, setCount] = usePoolState({
9    pool,
10    fieldName: 'count',
11    disabled: props?.disabled,
12  });
13
14  return (
15    <div>
16      <p>{count}</p>
17      <button onClick={() => setCount(prv => prv + 1)}>Increase Count</button>
18    </div>
19  );
20}
21
22// Use setValue method to update state outside component
23export async function getData() {
24  const res = await fetch('url');
25  res?.data?.count && pool.setValue('count', res.data.count);
26}

Documentation