FF
FeatureFlare docs
Guides and API reference
Back to app
GuidesAPI docs
Guide

@featureflare/react

Provider and hooks integration for React applications.

Current section
Product and workflow docs
Use these pages when you are wiring projects, operating flags, and reviewing rollout behavior.

@featureflare/react

React integration layer that wraps sdk-js with provider context, React Query state, and ergonomic hooks for single and multi-flag usage.

More on this: provider and config contract details are in FeatureFlareProvider and FeatureFlareReactConfig.

Install

pnpm add @featureflare/react

Package page: npmjs.com/package/@featureflare/react

Primary exports

  • FeatureFlareProvider for app-level context and client lifecycle.
  • FeatureFlareReactConfig for explicit provider configuration.
  • useFlag/useBoolFlag for single-flag reads.
  • useFlags/useBoolFlags for bulk reads and subscription options.
  • useFeatureFlareUser and useFlagDiagnostics for user context and evaluation telemetry.

Minimal provider wiring

import { FeatureFlareProvider } from '@featureflare/react';

const config = {
  sdkKey: import.meta.env.VITE_FEATUREFLARE_CLIENT_KEY_DEV,
  waitForFlags: true,
};

<FeatureFlareProvider config={config} initialUser={{ id: 'user-123' }}>
  <App />
</FeatureFlareProvider>;

Hook usage example

import { useBoolFlag } from '@featureflare/react';

function NewNavGate() {
  const { value, loading, error } = useBoolFlag('new-nav', false);
  if (loading) return null;
  if (error) return null;
  return value ? <NewNav /> : <LegacyNav />;
}

Related docs