getuserfeedback.
Docs

React SDK

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

Last reviewed

React SDK

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

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.

Where you place the provider matters:

  • Wrap your entire app if you want to reach all users — including visitors who haven't signed in, pre-login pages, and public-facing surfaces.
  • Wrap just below your auth provider if you only want to target authenticated users.

Whole app (everyone, including visitors who haven't signed in)

import { GetUserFeedbackProvider } from "@getuserfeedback/react";

export function App() {
  return (
    <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
      <AppRoutes />
    </GetUserFeedbackProvider>
  );
}

After auth (authenticated users only)

import { GetUserFeedbackProvider } from "@getuserfeedback/react";
import { AuthProvider } from "./auth";

export function App() {
  return (
    <AuthProvider>
      <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
        <AuthenticatedRoutes />
      </GetUserFeedbackProvider>
    </AuthProvider>
  );
}

The only required option is apiKey — grab it from Settings → Widget in the getuserfeedback.com dashboard.

You're live

That's it. The widget is running and surveys will show up based on the targeting rules you set in the getuserfeedback.com dashboard.

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

import { useEffect } from "react";
import { useGetUserFeedback } from "@getuserfeedback/react";

function IdentifyUser({ user }: { user: { id: string; email: string; plan: string } | null }) {
  const { identify } = useGetUserFeedback();

  useEffect(() => {
    if (user) {
      identify(user.id, { email: user.email, plan: user.plan });
    }
  }, [user, identify]);

  return null;
}

This step is optional — surveys 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.

Call reset() on logout so the previous user's identity doesn't carry over.

Dark mode

The widget automatically matches your app's color scheme. If your app is in dark mode, the widget follows along. If your app doesn't have dark mode, the widget stays light. No configuration needed.

You can force a specific scheme in clientOptions:

<GetUserFeedbackProvider
  clientOptions={{ apiKey: "YOUR_API_KEY", colorScheme: "dark" }}
>

Or update it at runtime:

const client = useGetUserFeedback();
client.configure({ colorScheme: "system" });

See Dark mode for the full story on how detection works.

Privacy & consent

By default, the widget starts with granted consent. If you need GDPR or CCPA compliance, set defaultConsent to "pending" and update it after the user makes a choice:

<GetUserFeedbackProvider
  clientOptions={{ apiKey: "YOUR_API_KEY", defaultConsent: "pending" }}
>

Then sync with your cookie banner or CMP:

const client = useGetUserFeedback();

// When the user grants consent:
client.configure({
  consent: ["analytics.measurement", "analytics.storage"],
});

// Or deny:
client.configure({ consent: "denied" });

Response collection and imperative flow display are never affected by consent settings — only targeting rules that depend on persisted activity or storage-backed signals.

Going further