## Usage

```tsx React theme={null} import { WhopElements, Tracking, PeopleElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( console.log("periodChanged", payload)} onAttributionModelChanged={(payload) => console.log("attributionModelChanged", payload)} onFiltersChanged={(payload) => console.log("filtersChanged", payload)} onSortChanged={(payload) => console.log("sortChanged", payload)} onPersonOpened={(payload) => console.log("personOpened", payload)} /> ); } ``` ```html Vanilla theme={null} ```

## Props Narrow to people acquired by a traffic source, as a source path — `whop:adcamp_…:*` for one of the account’s campaigns, `ext:*` for ads run elsewhere, `referrer:*`, `direct`. The same value the ads table’s click counts link with, so a page can hydrate this straight from its own URL. Defaults to `""`. Narrow to people who performed an event, by its name — `payment.completed`, `pixel.lead`, `pixel.page`. Defaults to `""`. Narrow to people who performed a custom pixel event, by its custom name. Pairs with an empty `eventName`. Defaults to `""`. Narrow by the `utm_source` their traffic carried. Comma-separate to match any of several. Defaults to `""`. Narrow by country, as a two-letter ISO code — `US`, `GB`. Defaults to `""`. Narrow by device class — `desktop`, `mobile`, `tablet`, `bot`. Defaults to `""`. Narrow by browser name. Defaults to `""`. Narrow by operating system name. Defaults to `""`. `true` for customers only, `false` for people who never bought, empty for everyone. Defaults to `""`. What the search box is filtered to — a name, an email, or an identifier. Defaults to `""`. Narrow to a saved audience (`aud_…`) built from people filters. The audience filter menu moves this. Defaults to `""`. Pin the event window for `source`/`eventName` filters to an exact ISO 8601 instant instead of the handle’s `period`. Set both `eventFrom` and `eventTo` or neither. Defaults to `""`. The pinned event window’s end, as an ISO 8601 instant. Defaults to `""`. The sorted column: `name`, `email`, `ltv`, `purchase_count`, `event_count`, `first_seen_at`, `last_seen_at`. Defaults to `"last_seen_at"`. The sort direction. Defaults to `"desc"`. ## Events Pass a callback in the create options (or React prop) to receive these. ### `onPeriodChanged` The viewer moved the window from the period selector. Every surface under the same handle has already followed it; persist it and pass it back as `period`/`customRange` on the handle, or the window resets on the next mount. **Signature:** `((payload: { period: "today" | "yesterday" | "last_7_days" | "last_14_days" | "last_30_days" | "last_90_days" | "all_time" | "custom"; customRange: { from: string; to: string; } | null; }) => void)` ### `onAttributionModelChanged` The viewer changed which touch gets the credit, from the filter row’s Attribution menu. Every surface under the same handle has already re-credited; persist it and pass it back as `attributionModel` on the handle, or it reverts on the next mount. **Signature:** `((payload: { attributionModel: "last_touch" | "first_touch"; }) => void)` ### `onFiltersChanged` The viewer moved a filter, the search box, or the audience picker. Carries the WHOLE filter state whichever moved — mirror it into your own URL and pass it back as props to make the view reproducible. **Signature:** `((payload: PeopleFilterBag) => void)` ### `onSortChanged` The viewer sorted a column. Persist and pass back as `sort`/`dir`, or sorting resets on the next mount. **Signature:** `((payload: { sort: string; dir: "asc" | "desc"; }) => void)` ### `onPersonOpened` The viewer clicked a person row and the handle has no `links.person` to follow — open your own person view with it (`personId` is the stable per-person key; `identifier` is the most human-meaningful one the surface has), or pass `links.person` on the handle to turn rows into real anchors instead. **Signature:** `((payload: { identifier: string; personId: string; }) => void)` ### `onLoaderStart` Fired the moment the element's own loading skeleton has painted inside its frame. This is 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, which is 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, and it re-renders with the merged props. React consumers never call it; updating the JSX props does the same. **Signature:** `(options: Partial) => void` ## Styling This element exposes no targetable class names. Use `appearance` (theme, accent color, variables) to restyle it.