FamilyDrawer

FamilyDrawer is a client component that renders a trigger button and a Drawer titled "Options" containing four built-in views for wallet settings. Use it as a ready-made wallet settings panel. View changes animate the container height (measured with react-use-measure) and cross-fade the content with scale and blur. It inherits the SidebarProvider requirement from Drawer, which DesignSystemProvider satisfies (see Notes).

Import#

import { FamilyDrawer } from "@reactberry/system/blocks";

Usage#

import { FamilyDrawer } from "@reactberry/system/blocks";

export default function WalletSettings() {
  return (
    <FamilyDrawer
      id="wallet-settings"
      width={{ _: "100%", md: "400px" }}
      onViewChange={(view) => console.log("Current view:", view)}
    />
  );
}

Examples#

Custom trigger#

Pass an element to trigger and set initialView to open on a specific view. The sample key is not a real secret.

Remove wallet#

Start on the "remove" view and handle the confirmation in onRemove. Continue calls it, returns to the default view, and closes the drawer.

API#

FamilyDrawer#

No other props are accepted. A valid trigger element is rendered as-is with an onClick that calls its own onClick and then toggles the drawer; other nodes are rendered inside the default trigger button. Without trigger, a "Settings" button with a gear icon is rendered.

Accessibility#

• Navigation between views uses native buttons. View titles in the key, phrase, and remove views are h2 elements.
• Focus is not moved when the view changes. The drawer itself has the same behaviour as Drawer.

Notes#

• The drawer and trigger read open state via useSidebar, which requires SidebarProvider. DesignSystemProvider mounts SidebarProvider, and both SidebarProvider and useSidebar are exported from @reactberry/system/providers. Outside a provider, the drawer stays closed and a useSidebar must be used within a SidebarProvider warning is logged.
• The built-in views:
  • "default" — an "Options" heading with buttons for View Private Key, View Recovery Phrase, and Remove Wallet.
  • "key" and "phrase" — explanatory text with security reminders, plus Cancel and Reveal buttons. Reveal calls onReveal, shows privateKey or recoveryPhrase (when provided) in a code block, and replaces the buttons with Done, which returns to the default view.
  • "remove" — a confirmation warning with Cancel and Continue buttons. Continue calls onRemove, returns to the default view, and closes the drawer.
• The revealed state is local to the key or phrase view and resets when the view is left.
• The current view is held in component state and is not reset when the drawer is closed with the close button or backdrop.
• The FamilyDrawerView type is not re-exported from the blocks entry point.