webnet/packages/react

@webnet/react

Shared React hooks and components for webnet apps.

It provides SSR-safe capability hooks built on useSyncExternalStore (useClient, useSecureContext, useSharedWorkerAvailable), a useLocalStorage hook that syncs a string value across tabs via the storage event, and error-serialization and display helpers (serializeError, ErrorDetails) for preserving and rendering caught errors, including causes and aggregate errors. ErrorDetails keeps the technical details collapsed by default; callers can pass a redactor to serializeError when error content may be sensitive.

Entry points

Entry point	Description
@webnet/react	Hooks and components: useClient, useLocalStorage, useSecureContext, useSharedWorkerAvailable, serializeError, ErrorDetails

Usage

import { useClient, useLocalStorage, serializeError, ErrorDetails } from "@webnet/react"

function Panel() {
  const isClient = useClient()
  const [theme, setTheme] = useLocalStorage("theme", "light")

  if (!isClient) return null

  return <button onClick={() => setTheme("dark")}>Current theme: {theme}</button>
}

function Fallback({ error }: { error: unknown }) {
  return <ErrorDetails error={serializeError(error)} />
}

See also

• @webnet/utils — browser utilities without a React dependency