ras
react-atomic-state
npm i react-atomic-state
ras

react-atomic-state

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

by Mathieu Acthernoene

1.2.6 (see all)License:MITTypeScript:Built-In
npm i react-atomic-state
Readme

⚛️ react-atomic-state

bundlephobia npm version styled with prettier

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

Installation

$ npm install --save react-atomic-state
# --- or ---
$ 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.
I don't like the Context API and existing global state management libraries (overkill to me most of the times. So I decided to publish this small library to cover this specific need 🙌.

Usage

// states/count.ts
import { atom, useAtom, useAtomWithSelector } from "react-atomic-state";

const count = atom(0);

export const decrement = () => count.set((prevCount) => prevCount - 1);
export const increment = () => count.set((prevCount) => prevCount + 1);

const unsubscribe = count.subscribe((value) => {
  console.log(value); // log every update
});

// create a custom hook
export const useCount = () => useAtom(count);

// create a custom hook with selector
export const useStringCount = () =>
  useAtomWithSelector(count, (count) => count.toString());
import { decrement, increment, useCount } from "./states/count.ts";

const Counter = () => {
  const count = useCount();

  return (
    <div>
      <span>count: {count}</span>

      <button onClick={decrement}>-1</button>
      <button onClick={increment}>+1</button>
    </div>
  );
};

API

atom()

type atom = <Value>(initialValue: Value) => {
  get: () => Value;
  set: (value: Value | ((prevValue: Value) => Value)) => void;
  subscribe: (callback: (value: Value) => void) => () => void;
  reset: () => void;
};

useAtom()

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

useAtomWithSelector()

type useAtom = <Value, Selection>(
  atom: Atom<Value>,
  selector: (value: Value) => Selection,
  isEqual?: (prevSelection: Selection, nextSelection: Selection) => boolean,
) => Value;

Downloads/wk

30

GitHub Stars

39

LAST COMMIT

6mos ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.2.6
latest
3mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate