@brushy/storage-react

React bindings for @brushy/storage. Uses useSyncExternalStore for persisted values (no useEffect sync).

Install

npm install @brushy/storage @brushy/storage-react react

Peer dependencies:

• react >= 18.0.0
• @brushy/storage (install explicitly)

Setup

import { createStorage } from "@brushy/storage";
import { StorageProvider, useStorage } from "@brushy/storage-react";

const storage = createStorage({ persist: "local" });

function Root({ children }: { children: React.ReactNode }) {
  return <StorageProvider storage={storage}>{children}</StorageProvider>;
}

useStorage

function ThemeToggle() {
  const { value: theme, set, remove } = useStorage("ui:theme", "light");

  return (
    <button type="button" onClick={() => set(theme === "light" ? "dark" : "light")}>
      {theme}
    </button>
  );
}

useStorageContext

Access the shared Storage instance from context (for custom hooks or non-keyed operations):

import { useStorageContext } from "@brushy/storage-react";

function CacheStats() {
  const storage = useStorageContext();
  return <span>{storage.keys().length} keys</span>;
}

API

| Export | Description | | --- | --- | | StorageProvider | Provides a Storage instance via React context | | useStorage(key, initial?) | Subscribe to a key; returns { value, set, remove } | | useStorageContext() | Access the context Storage instance | | getDefaultStorage() | Fallback storage when no provider is mounted |

Related

• @brushy/storage: createStorage, TTL, events, persist, CacheBus
• React hooks docs
• Migration from @brushy/localstorage