React SDK reference

The React SDK wraps the same runtime as the JavaScript SDK in a provider plus hooks. If you haven't set up yet, start with the React SDK guide.

GetUserFeedbackProvider

Initializes the widget client and makes it available to all hooks below it.

<GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}><App /></GetUserFeedbackProvider>

clientOptions

Manual loading

When disableAutoLoad is true, provide the initial color scheme, consent as defaultConsent, and capabilities in clientOptions, then call client.load() when you are ready to start the widget. Configure auth and make other dynamic configuration changes after load(). A configure() call before load() resolves without applying its update. Call load() before commands that require the widget, such as opening a flow or tracking an event.

Links (links)

Keep clientOptions.links.router present for the provider's mounted lifetime. Its function may change between renders, but adding or removing it after the client initializes throws.

Actions (actions)

Register custom actions through clientOptions.actions. Definitions remain fixed for the provider's mounted lifetime, while the handler can be refreshed. See Actions for setup and behavior.

useGetUserFeedback()

Returns the client instance with the same core methods as the JavaScript SDK.

• identify(userId, traits?, options?) — associate a user ID, traits, and optional external IDs with the current user
• identify(traits, options?) — associate traits with the current user
• identify(traits, undefined, options?) — three-argument form for call sites that keep options separate
• reset() — clear identity and auth state on logout
• configure({ colorScheme?, consent?, auth?, capabilities? }) — update settings at runtime
• track(eventName, properties?, options?) — track a product event with optional external IDs
• page(name?, properties?, options?) — record a browser page or web location. See Events.
• graph.connect(relationship) — record that two product objects are connected
• graph.disconnect(relationship) — record that the connection ended
• flow(flowId) — get a reusable flow handle with per-flow getFlowState() and subscribeFlowState(callback, options?) methods
• getFlowState() — get the instance-level aggregate flow state
• subscribeFlowState(callback, options?) — subscribe to instance-level aggregate flow state; returns an unsubscribe function
• onOpenRequested(callback) — observe persisted Flow opens before presentation and optionally suppress that attempt
• load() — manually start the widget when disableAutoLoad is true
• close() — close any open flow

These flow observation members are inherited from the JavaScript SDK client. See the JavaScript flow state reference for FlowState fields, subscription options, initial emission, and abort behavior. Client-level methods observe the aggregate state for the logical client; the handle returned by flow(flowId) observes one flow.

See Capabilities for provider initialization and runtime update examples. The widget checks for newly eligible flows after capabilities change.

Events

Use track() for product actions and page() for browser page or web locations. See Events for the shared argument rules and examples.

Relationships

The client also exposes graph.connect() and graph.disconnect() for ordinary relationship observations:

const relationship = {from: { collection: "user", id: "user_123" },to: { collection: "account", id: "acct_456" },};await client.graph.connect(relationship);await client.graph.disconnect(relationship);

See Groups for audience behavior and current limitations.

useFlow(options)

The main hook for working with a specific flow. Its reactive isOpen and isLoading values are the corresponding fields from that flow handle's FlowState and update as the flow changes. The hook return value does not expose width or height; use the JavaScript client or flow-handle methods above when you need the full snapshot or an explicit subscription.

const { open, prerender, isLoading } = useFlow({flowId: "YOUR_FLOW_ID",});

Options

Return value

• container — the selected "default" or "custom" presentation mode
• open(options?) — open the flow (options include metadata)
• prefetch() — load flow resources over the network
• prerender() — warm up the UI before opening
• close() — close the flow
• isOpen — true while the flow is visible
• isLoading — true after open() is requested while the flow is not visible yet
• shouldRenderContainer — available with container: "custom"; true when the container should be in the DOM
• containerRef — available with container: "custom"; attach this ref to your container element

These methods return promises. React wraps the same JavaScript SDK runtime, so handle a rejected command through the returned promise. Await when sequencing matters; otherwise handle the rejection explicitly, typically with void operation.catch(...). See Handle command promises for the full pattern.

Example:

const { open } = useFlow({ flowId: "YOUR_FLOW_ID" });await open({metadata: {tags: {journey_stage: "onboarding",task_type: "report-export",},},});

For metadata examples and supported value shapes, see Response metadata.

useFlowContainer()

Registers one customer-owned container for flows using the default presentation in the provider subtree, including flows opened by targeting. Mount exactly one useFlowContainer() consumer per logical client. Providers with the same API key and targeting context reuse that client.

See Containers for a complete example.