usePersistentState

The usePersistentState hooks store boolean UI state in a configurable persistence adapter, such as cookies, local storage, or session storage.

Import

import {
  usePersistentState,
  usePersistentLocalStorage,
  usePersistentSessionStorage,
  usePersistentCookie,
  createLocalStorageAdapter,
} from "@cfa/react-core";

Usage

Local Storage

function Example() {
  const [isOpen, setIsOpen] = usePersistentLocalStorage("example-panel-open", true);

  return (
    <Button onPress={() => setIsOpen((open) => !open)}>
      {isOpen ? "Close panel" : "Open panel"}
    </Button>
  );
}

Cookies

function Example() {
  const [isOpen, setIsOpen] = usePersistentCookie("panel-open", true, {
    maxAge: 60 * 60 * 24 * 7,
    path: "/",
    sameSite: "lax",
  });

  return <Button onPress={() => setIsOpen((open) => !open)}>{isOpen ? "Close" : "Open"}</Button>;
}

Custom Adapter

function Example() {
  const adapter = React.useMemo(() => createLocalStorageAdapter(), []);
  const [isOpen, setIsOpen] = usePersistentState("custom-panel-open", true, adapter);

  return <Button onPress={() => setIsOpen((open) => !open)}>{isOpen ? "Close" : "Open"}</Button>;
}

API

usePersistentState(
  key: string,
  defaultValue: boolean,
  adapter: PersistenceAdapter<boolean>
): [boolean, React.Dispatch<React.SetStateAction<boolean>>]

Convenience Hooks

• usePersistentLocalStorage(key, defaultValue) - Stores state in localStorage.
• usePersistentSessionStorage(key, defaultValue) - Stores state in sessionStorage.
• usePersistentCookie(key, defaultValue, options) - Stores state in a cookie.

Adapters

• createLocalStorageAdapter()
• createSessionStorageAdapter()
• createCookieAdapter(options)
• createNoOpAdapter()

Adapters return null when no value is stored, and storage errors fall back to the current in-memory React state.