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 properties 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, auth, and runtime properties on logout
• configure({ colorScheme?, consent?, auth?, properties? }) — 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 Runtime properties for initialization and updates.

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 interaction is open
• 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

Custom-container content follows its React mounted lifetime. Closing the flow updates SDK state while preserving content through your host's exit animation. Unmounting the container releases it. An always-mounted host retains its last closed content until replacement or reset; use shouldRenderContainer to control the host's visibility or mounting.

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 share one root client. Supplied properties update that shared context; separate providers do not create independent property contexts.

See Containers for a complete example.