## Usage

```tsx React theme={null} import { WhopElements, Wallet, Balances, BalancesBalanceElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( console.log("rangeChanged", payload)} onRangeBrushed={(payload) => console.log("rangeBrushed", payload)} /> ); } ``` ```html Vanilla theme={null} ```

## Props When the account opened, as an ISO timestamp. `ALL` opens on this instead of on its five-year default, so an account older than that keeps its history. Defaults to `""`. Names the account in the label — `Total balance · Acme` at rest, `Acme balance on Jul 9` while a point is read. Unset, the label is just `Total balance`. Defaults to `""`. The stretch marked on the line, as ISO timestamps — set it to drive the selection yourself, or to `null` to drop the one the viewer made. Echo back what `rangeBrushed` reports and a filter cleared elsewhere on your page clears the mark here too. Defaults to `null`. Drop the figure and its move, leaving the line and the picker. Defaults to `false`. Drop the line, leaving the figure and the picker. Defaults to `false`. How tall the line is drawn, in pixels. Defaults to `210`. ## Events Pass a callback in the create options (or React prop) to receive these. ### `onRangeChanged` The window in view moved. Mirror it if another surface of yours reads the same period. **Signature:** `((payload: { range: "1D" | "1W" | "1M" | "1Y" | "ALL"; }) => void)` ### `onRangeBrushed` The viewer dragged across the line to select a stretch of it, or cleared the selection (`null`). ISO timestamps plus the window they were read in — filter your own surfaces (an activity list, a table) to the same stretch, at the same granularity. **Signature:** `((payload: { from: string; to: string; range: "1D" | "1W" | "1M" | "1Y" | "ALL"; } | null) => void)` ### `onLoaderStart` Fired the moment the element's own loading skeleton has painted inside its frame — the earliest point a consumer-managed loading state can hand off without ever exposing a blank. Always precedes `onReady`; most consumers only need `onReady`. **Signature:** `(() => void)` ### `onReady` Fired once the element has booted and painted its first complete frame. **Signature:** `(() => void)` ### `onError` Fired when the element fails to load or crashes; the element shows its own error fallback. `message` is human-readable; framework refusals also carry `code` (e.g. `HOST_SOURCE_FAILED`, with `sourceKey` naming the failed hostState key) so hosts can switch on codes, never message text. **Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)` ## Methods Call these on the element handle — the return of `create` (vanilla) or the component `ref` (React). ### `mount` Place the element on the page: appends its container to `target` (a CSS selector or an element) and starts loading. Nothing renders until this is called. React consumers never call it — the component mounts itself. **Signature:** `(target: string | HTMLElement) => void` ### `destroy` Remove the element from the page and release its frame and subscriptions. Safe to call more than once. React consumers never call it — unmounting the component does it. **Signature:** `() => void` ### `update` Change this element's consumer props after mount — it re-renders with the merged props. React consumers never call it — updating the JSX props does the same. **Signature:** `(options: Partial) => void` ## Styling Each part below is a stable class name — safe to depend on. Restyle a part by mapping its class to a **style declaration object** under `appearance.classes` (properties camelCase or kebab-case, values as strings with units — the same shape as React's `style` prop). The element renders in its own frame, so page stylesheets can't reach it: these declarations are sanitized against a safe-property allowlist and injected inside the frame for you. | Class | Targets | | --------------------------- | ------------------------------------------ | | `.whop-Balance` | The total, its line, and the window picker | | `.whop-BalanceBrushSummary` | The measured stretch | | `.whop-BalanceChart` | The balance line | | `.whop-BalanceRanges` | The window picker | | `.whop-BalanceTotal` | The total and its move | ```ts theme={null} const wallet = whop.wallet.create({ appearance: { classes: { 'whop-Balance': { borderRadius: '8px', fontWeight: '600' }, 'whop-BalanceBrushSummary': { borderRadius: '8px', fontWeight: '600' }, 'whop-BalanceChart': { borderRadius: '8px', fontWeight: '600' }, 'whop-BalanceRanges': { borderRadius: '8px', fontWeight: '600' }, 'whop-BalanceTotal': { borderRadius: '8px', fontWeight: '600' } } } }); // restyle live at any point — the same shape through update() wallet.update({ appearance: { classes: { 'whop-Balance': { fontWeight: '700' } } } }); ``` In React, pass the same object as the `appearance` prop on ``; `appearance` also applies globally at `WhopElements({ appearance })`.