X-STATE-MANAGER

A lightweight state manager built on top of SWR for efficient state management with caching, optimistic updates, and modular architecture. It allows easy global and local state management and supports TypeScript for enhanced type-safety.

Installation

NPM

1npm i x-state-manager

YARN

1yarn add x-state-manager

Usage example

store/counterStoreData.ts

1// store key for managing counter state
2export const COUNTER_STORE_DATA_KEY = 'COUNTER_STORE_DATA_KEY';
3
4export type CounterState = number;
5
6// fetch counter from local storage. Here can be any API call
7export const fetchCounter = async (): Promise<CounterState> => {
8  const value = localStorage.getItem('counter');
9  return value ? Number(value) : 0;
10};

store/useCounter.ts

1import { createSWRState } from 'x-state-manager';
2import { COUNTER_STORE_DATA_KEY, fetchCounter } from './counterStoreData';
3
4// create and return counter state
5export const useCounter = () => {
6  // COUNTER_STORE_DATA_KEY is the key for managing counter state (it should be unique for each state)
7
8  // fetchCounter is the function for fetching counter from local storage or API (here can be any API call or null)
9
10  // Third argument is the options (it is optional) for SWR (https://swr.vercel.app/docs/api#options)
11  // {
12  //   fallbackData: 0, --> default state value
13  // }
14
15  return createSWRState<number>(COUNTER_STORE_DATA_KEY, fetchCounter, {
16    fallbackData: 0,
17  });
18};

1'use client';
2
3import { useCounter } from '../store/useCounter';
4
5const Counter: React.FC = () => {
6  const { data: count, mutate, isLoading } = useCounter();
7
8  const increment = () => {
9    // first argument can be new value or function with previous value that will be return new value.
10    // second argument is boolean to determine if should revalidate the data
11    mutate((prevData) => (prevData ?? 0) + 1, false);
12  };
13
14  return (
15    <div className='flex flex-col gap-8 '>
16      <h1>Count: {isLoading ? 'Loading...' : count}</h1>
17
18      <button onClick={increment} className='rounded bg-blue-500 px-4 py-2'>
19        Increment
20      </button>
21    </div>
22  );
23};
24
25export default Counter;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.