This page documents
@whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.Tracking. accountId and accessToken come from there. Pass props and callbacks through the create options or React props.
You can mount this element inline (
create) or open it as a modal overlay (createOverlay).Example data. Open the Playground.
Props
string
The person to show, as any identifier the account has seen them under: the stable
prsn_… person ID, a Whop user ID, or an email. Required. personOpened carries two of these; prefer its personId, the stable key that names the same person on every surface. If nothing resolves, the view says so rather than rendering empty. Defaults to "".Events
Pass callbacks in the create options or React props.onLoaderStart
Runs after the loading skeleton first paints and before onReady.
Signature: (() => void)
onReady
Runs after the element’s first complete paint.
Signature: (() => void)
onError
Runs when the element fails to load or crashes. The fallback remains visible. Use code for programmatic handling. sourceKey identifies a failed host-state source.
Signature: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)
Methods
Call these on the handle returned bycreate, or through a React ref.
mount
Mounts the element in target and starts loading. React components mount themselves.
Signature: (target: string | HTMLElement) => void
destroy
Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
Signature: () => void
update
Merges new props into the mounted element. In React, change the component props instead.
Signature: (options: Partial<PersonElementProps>) => void
Styling
This element doesn’t expose class names for styling. Useappearance (theme, accent color, variables) to restyle it.