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>

If the current app version supports a newly shipped feature, report that with capabilities:

<GetUserFeedbackProviderclientOptions={{apiKey: "YOUR_API_KEY",capabilities: ["checkout.drawer"],}}><App /></GetUserFeedbackProvider>

clientOptions

Actions (actions)

Register custom actions and optional browser URL handling through clientOptions.actions. Definitions remain fixed for the provider's mounted lifetime, while matching handler functions 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
• 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

Use capabilities when the supported capabilities become known or change after the widget has loaded:

import { useEffect } from "react";import { useGetUserFeedback } from "@getuserfeedback/react";function CheckoutRouteCapabilities() {const client = useGetUserFeedback();useEffect(() => {client.configure({capabilities: ["checkout.drawer", "messages.compose.v2"],});}, [client]);return null;}

The widget checks for newly eligible flows after capabilities change. See Capabilities.

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.

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

Options

Return value

• 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
• setOpen(boolean) — declarative open/close
• isLoading — true after open() is requested while the flow is not visible yet
• shouldRenderContainer — true when using container: "custom" and the container should be in the DOM
• containerRef — ref to attach to your container element

These methods return promises, but both fire-and-forget and await are valid. See JavaScript SDK reference for the execution model.

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.