@feedkit/feedback-react

React bindings for @feedkit/feedback-core: a <FeedbackProvider> and the useFeedback() hook. The widget renders in a Shadow DOM (no CSS leaks) and captures technical context automatically — console, network, rrweb session replay, screenshot and environment. Pair it with @feedkit/feedback-supabase to persist with no backend of your own.

Works with React 17, 18 and 19 — including StrictMode.

Install

npm i @feedkit/feedback-core @feedkit/feedback-react @feedkit/feedback-supabase

Setup

Define the config outside the component (the provider reads it once), then wrap your app:

import { FeedbackProvider } from '@feedkit/feedback-react';
import { supabaseTransport } from '@feedkit/feedback-supabase';
import type { FeedbackConfig } from '@feedkit/feedback-core';

const feedbackConfig: FeedbackConfig = {
  transport: supabaseTransport({
    url: import.meta.env.VITE_SUPABASE_URL,
    anonKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
  }),
  ui: { position: 'right', theme: 'auto', locale: 'pt-BR' },
};

createRoot(document.getElementById('root')!).render(
  <FeedbackProvider config={feedbackConfig}>
    <App />
  </FeedbackProvider>,
);

The floating launcher mounts automatically. That's it.

useFeedback()

import { useFeedback } from '@feedkit/feedback-react';

function Header({ user }) {
  const feedback = useFeedback();

  return (
    <>
      <button onClick={() => feedback.open('bug')}>Report a bug</button>
      <button onClick={() => feedback.identify({ id: user.id, name: user.name, email: user.email })}>
        after login
      </button>
      <button onClick={() => feedback.reset()}>on logout</button>
    </>
  );
}

| Method | What it does | |---|---| | open(type?) | Opens the widget, optionally straight into 'idea' \| 'comment' \| 'bug' | | close() | Closes the panel | | identify(user) | Attaches the logged-in user to every payload | | reset() | Clears identification (the persistent anonymousId stays) | | setConsent(enabled) | Opt-out: stops captures and clears buffers | | setMetadata(obj) | Custom key/values attached to every payload | | submit(type, message, opts?) | Sends programmatically, without opening the widget |

Calling useFeedback() outside the provider throws a descriptive error.

Notes

• SSR safe: the client is constructed without touching the DOM; the widget only mounts in the browser.
• StrictMode safe: the double mount/unmount in React 18+ dev mode leaves exactly one working widget.
• rrweb, html2canvas and pako are lazy-loaded via dynamic import — out of your first load.

See @feedkit/feedback-core for what gets captured, privacy controls and the full config reference.

MIT © Eduardo Santana