@kintools/store-react

React bindings for @kintools/store-core, built on useSyncExternalStore. Also re-exports everything from core.

Install

npm add @kintools/store-react

pnpm add @kintools/store-react

deno add jsr:@kintools/store-react

Usage

useStore subscribes to the whole state. useSelector subscribes to a selected value and re-renders only when it changes (compared with shallowEqual by default). StoreProvider and useStoreContext inject a store through context.

import { createStore, useSelector, useStore } from "@kintools/store-react";

const store = createStore({ count: 0, name: "Ada" });

function Name() {
  const name = useSelector(store, (s) => s.name);
  return <span>{name}</span>;
}

function Counter() {
  const { count } = useStore(store);
  return (
    <button onClick={() => store.merge({ count: count + 1 })}>{count}</button>
  );
}

Docs

kintools.dev/store/react