getuserfeedback.
Docs

React SDK reference

The full API surface of @getuserfeedback/react — provider, hooks, and client options.

Last reviewed

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.

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

clientOptions

OptionTypeDefaultDescription
apiKeystringrequiredYour project API key.
colorScheme"light" | "dark" | "system" | { autoDetectColorScheme: string[] }auto-detectColor scheme. See Dark mode.
defaultConsent"granted" | "pending" | "denied" | "revoked" | GrantScope[]"granted"Initial consent state. See Privacy & consent.
disableAutoLoadbooleanfalseWhen true, call client.load() manually before opening surveys.
disableTelemetrybooleanfalseDisables anonymous performance telemetry. Does not affect user analytics.

useGetUserFeedback()

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

  • identify(userId, traits?) or identify(traits) — see Personalization
  • reset() — clear identity and auth state on logout
  • configure({ colorScheme?, consent?, auth? }) — update settings at runtime
  • load() — manually start the widget when disableAutoLoad is true
  • close() — close any open flow

useFlow(options)

The main hook for working with a specific survey or flow.

TypeScriptfeedback-button.tsx
const { open, prerender, isLoading } = useFlow({flowId: "YOUR_FLOW_ID",});

Options

OptionTypeDefaultDescription
flowIdstringrequiredThe flow or survey ID to target.
prefetchOnMountbooleanfalsePrefetch flow resources when the component mounts.
hideCloseButtonbooleanfalseHide the default close button.
container"default" | "custom""default"Use "custom" to render inside your own element. See Containers.

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 while the flow is loading
  • shouldRenderContainer — true when using container: "custom" and the container should be in the DOM
  • containerRef — ref to attach to your container element
  • width / height — recommended dimensions for custom containers

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

Example:

TypeScriptfeedback-button.tsx
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.

useDefaultFlowContainer()

Returns the default container ref and dimensions. Useful when you want to customize the container wrapper but keep the default sizing behavior.