@loupe-platform/react

React adapter for the Loupe feedback SDK. Thin wrapper over @loupe/sdk — handles init/teardown via a provider and exposes an imperative hook.

Install

npm i @loupe-platform/react

Usage

Wrap your app once. The SDK initializes on mount and shuts down on unmount (StrictMode-safe).

import { LoupeProvider } from '@loupe-platform/react';

export function App({ children }) {
  return (
    <LoupeProvider
      config={{
        dsn: 'https://loupe.example.com/v1/ingest/p/pk_xxx',
        env: 'staging',
        widget: { label: 'Feedback', position: 'bottom-right' },
        privacy: { maskAllInputs: true },
      }}
    >
      {children}
    </LoupeProvider>
  );
}

useLoupe()

import { useLoupe } from '@loupe-platform/react';

function Profile({ user }) {
  const { identify, setContext, open, captureFeedback } = useLoupe();

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

  return <button onClick={open}>Report a problem</button>;
}

| Method | Description | | --- | --- | | identify(user) | Attach/update the current user identity. | | setContext(key, value) | Add arbitrary context sent with feedback. | | open() | Open the feedback widget programmatically. | | captureFeedback(fb) | Submit feedback without the widget (captures a fresh screenshot). |

Keep it out of production

Gate the provider so it never ships to real customers:

if (process.env.NEXT_PUBLIC_LOUPE_ENABLED !== 'true') return <>{children}</>;