## Usage

```tsx React theme={null} import { WhopElements, Tracking, EventsElement } 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)} onPersonOpened={(payload) => console.log("personOpened", payload)} /> ); } ``` ```html Vanilla theme={null} ```

## Props Pin the window to an exact ISO 8601 instant instead of the handle’s `period` — how a deep link reproduces the precise rows behind a metric. Set both `from` and `to` or neither. Defaults to `""`. The pinned window’s end, as an ISO 8601 instant. Defaults to `""`. Narrow to events attributed to a traffic source, as a source path — `whop:adcamp_…:*` for one of the account’s campaigns, `ext:*`, `referrer:*`, `direct`. Defaults to `""`. Narrow by the `utm_source` the traffic carried. 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 `""`. Narrow to one person’s journey — a person id, an email, or a visitor cookie. Set, the list ignores the window and shows their whole history. The search box moves this. Defaults to `""`. Narrow by event name — `payment.completed`, `pixel.lead`, `pixel.page`, or `pixel.custom:` for a custom event. The same value the ads table’s result counts link with. Defaults to `""`. ## 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 or the identifier search. 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: EventsFilterBag) => void)` ### `onPersonOpened` The viewer clicked a person cell 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 the cells 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.