@flusterduck/react

@flusterduck/react

React integration for Flusterduck. Provides a useFlusterduck hook and a FlusterduckProvider component that initialize the SDK once and expose tracking helpers throughout your component tree.

Installation

npm install flusterduck @flusterduck/react

Hook usage

import { useFlusterduck } from '@flusterduck/react';

export function App() {
  const { signal, track, identify, setConsent, optOut } = useFlusterduck({
    key: 'fd_pub_...',
    environment: 'production',
  });

  return (
    <button onClick={() => signal('checkout_error', { element: '#pay-btn' })}>
      Pay
    </button>
  );
}

The hook initializes the SDK on mount and tears it down on unmount. Call it once at the root of your app. Subsequent calls in child components will no-op since the SDK is a singleton.

Provider usage

import { FlusterduckProvider } from '@flusterduck/react';

export function Root() {
  return (
    <FlusterduckProvider apiKey="fd_pub_..." environment="production">
      <App />
    </FlusterduckProvider>
  );
}

FlusterduckProvider wraps useFlusterduck internally. Use it when you want initialization in JSX rather than a hook.

Conditional initialization

const { signal } = useFlusterduck({
  key: 'fd_pub_...',
  enabled: process.env.NODE_ENV === 'production',
});

Set enabled: false to skip initialization entirely. Tracking calls on the returned helpers are no-ops when disabled.

API

signal(name: string, data?: { element?: string; metadata?: Record<string, unknown>; weight?: number }): void
track(name: string, metadata?: Record<string, unknown>): void
identify(segment: Record<string, string>): void
setConsent(consented: boolean): void
optOut(): void

All options from the core SDK Config type are supported. See the flusterduck package for the full config reference.