getuserfeedback.
Docs

React SDK

Add the provider, identify your users, and you're live.

Last reviewed

The React SDK gives you a provider and hooks to add getuserfeedback.com to your React app.

Install & setup

1. Install

npm install @getuserfeedback/react

Requires react >= 18.

2. Add the provider

Wrap your app with GetUserFeedbackProvider. This creates the widget client and makes it available to all hooks below it. Keep it mounted across login and logout transitions.

The provider does not read your app's authentication state. The identity setup below controls identity-based targeting.

TypeScriptapp.tsx
import { GetUserFeedbackProvider } from "@getuserfeedback/react";export function App() {return (<GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}><AppRoutes /></GetUserFeedbackProvider>);}

The only required option is apiKey — find it in Widget settings.

You're live

That's it. The widget is running. Published flows — surveys, forms, and in-app messages — will show up when their delivery and targeting rules match.

3. Identify your users

If your app has logged-in users, identifying them enables targeting, personalization, and behavioral segmentation.

Render this after your app has an authenticated user object.

TypeScriptidentify-user.tsx
import { useEffect } from "react";import { useGetUserFeedback } from "@getuserfeedback/react";function IdentifyUser({user,}: {user: { id: string; email: string; plan: string };}) {const { identify } = useGetUserFeedback();const { email, id, plan } = user;useEffect(() => {async function identifyUser() {try {await identify(id, { email, plan });} catch (error) {console.error("Unable to identify user", error);}}void identifyUser();}, [email, id, identify, plan]);return null;}

This step is optional — flows work fine without it. But with user identity, you can target by plan, role, or behavior, and responses are tied to real people. See Personalization for the full picture.

In your app's authoritative logout handler, await reset() before another user can enter the same provider tree. reset() is asynchronous: it closes open flows, clears JWT authentication, and resets the current user identity. Other runtime configuration remains in place.

Track product events

We recommend sending product events server-side through an integration such as Segment. If client-side tracking fits your app better, use track().

You can call track() before or after login. When the same person is later identified, Identity resolution merges their events into a single profile. See Events for SDK examples, event naming, and property guidance.

Dark mode

The widget automatically matches your app's color scheme, and you can override it when needed. See Dark mode for detection behavior and SDK examples.

Privacy & consent

By default, the widget starts with pending consent. Update consent from your cookie banner or consent manager when a decision is available.

Consent settings do not block response collection or flows opened from code. They can prevent automatic targeting when its rules need measurement or storage. See Compliance & consent for scope behavior and SDK examples.

Going further