⚛️ react-atomic-state

Dead simple React global state management based on use-sync-external-store.

Installation

1$ npm install --save react-atomic-state
2# --- or ---
3$ yarn add react-atomic-state

❓Motivation

I'm a huge fan of the "state and props" couple, but sometimes I need to share a simple value to my entire application.
As I'm not a fan of the Context API and found existing global state management libraries overkill to me most of the times, I decided to publish this small library to cover this specific need 🙌.

Usage

1// states/count.ts
2import { atom, useAtom, useAtomWithSelector } from "react-atomic-state";
3
4const count = atom(0);
5
6export const decrement = () => count.set((prevCount) => prevCount - 1);
7export const increment = () => count.set((prevCount) => prevCount + 1);
8
9const unsubscribe = count.subscribe((value) => {
10  console.log(value); // log every update
11});
12
13// create a custom hook
14export const useCount = () => useAtom(count);
15
16// create a custom hook with selector
17// (not to create a complex object store - it's often better to create multiple atoms, but to derive data)
18export const useStringCount = () =>
19  useAtomWithSelector(count, (count) => count.toString());

1import { decrement, increment, useCount } from "./states/count.ts";
2
3const Counter = () => {
4  const count = useCount();
5
6  return (
7    <div>
8      <span>count: {count}</span>
9
10      <button onClick={decrement}>-1</button>
11      <button onClick={increment}>+1</button>
12    </div>
13  );
14};

API

atom()

1type atom = <Value>(initialValue: Value) => {
2  get: () => Value;
3  set: (value: Value | ((prevValue: Value) => Value)) => void;
4  subscribe: (callback: (value: Value) => void) => () => void;
5  reset: () => void;
6};

useAtom()

1type useAtom = <Value>(
2  atom: Atom<Value>,
3  isEqual?: (prevValue: Value, nextValue: Value) => boolean,
4) => Value;

useAtomWithSelector()

1type useAtomWithSelector = <Value, Selection>(
2  atom: Atom<Value>,
3  selector: (value: Value) => Selection,
4  isEqual?: (prevSelection: Selection, nextSelection: Selection) => boolean,
5) => Value;