React hooks

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

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

const storage = createStorage({
  id: "my-app",
  persist: "local",
  prefix: "@myapp:",
});

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

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

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

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

const { value, set, remove } = useStorage("key", defaultValue);

useStorage("token", null, { ttl: "1h" });

set((prev) => ({ ...prev, fontSize: 16 }));

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

function ClearCacheButton() {
  const storage = useStorageContext();
  return <button onClick={() => storage.flushAll()}>Clear all</button>;
}

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

const storage = getDefaultStorage();

// Server: always "light"
// Client after hydration: reads from localStorage
const { value: theme } = useStorage("ui:theme", "light");

// providers/storage-bridge.tsx
import { StorageProvider } from "@brushy/storage-react";
import { useInject } from "@brushy/di/react";
import { APP_CACHE } from "../shared/cache/cache.token";

export function StorageBridge({ children }: { children: React.ReactNode }) {
  const cache = useInject(APP_CACHE);
  return <StorageProvider storage={cache}>{children}</StorageProvider>;
}