React Web SDK reference

npm install @launchdarkly/react-sdk
npm install @launchdarkly/observability # optional observability plugin
npm install @launchdarkly/session-replay # optional session replay plugin

yarn add @launchdarkly/react-sdk
yarn add @launchdarkly/observability # optional observability plugin
yarn add @launchdarkly/session-replay # optional session replay plugin

import { useInitializationStatus, createLDReactProvider } from '@launchdarkly/react-sdk';

const LDProvider = createLDReactProvider('your-client-side-id', { kind: 'user', key: 'user-key' });

function App() {
  const { status, error } = useInitializationStatus();
  if (status === 'initializing') return <div> initializing </div>;
  if (status === 'failed') return <div> Error: {error?.message} </div>;
  return <div> Your application code </div>;
}

root.render(<LDProvider><App /></LDProvider>);

// app.js
import React, { useEffect } from 'react';
import { useLDClient } from '@launchdarkly/react-sdk';

export default function App() {
  const ldClient = useLDClient();

  useEffect(() => {
    ldClient.identify({ key: 'example-context-key' });
  }, []);

  return <div>Let your feature flags fly!</div>
}

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from 'app.js';
import { createLDReactProvider } from '@launchdarkly/react-sdk';

const root = ReactDOM.createRoot(document.getElementById('root'));

const LDProvider = createLDReactProvider('example-client-side-id', {
  kind: 'user',
  anonymous: true,
});

root.render(
  <LDProvider>
    <App />
  </LDProvider>
);

import { createLDReactProvider } from '@launchdarkly/react-sdk';

const LDProvider = createLDReactProvider(
  'example-client-side-id',
  { kind: 'user', key: 'example-user-key' },
  {
    ldOptions: {
      streaming: false, // or `true` to enable
    },
  },
);

import {
  useBoolVariation,
  useStringVariation,
  useNumberVariation,
  useJsonVariation,
} from '@launchdarkly/react-sdk';

const showNewFeature = useBoolVariation('show-new-feature', false);
const theme          = useStringVariation('ui-theme', 'light');
const maxItems       = useNumberVariation('max-items', 10);
const config         = useJsonVariation('my-config', {});

import { useBoolVariationDetail } from '@launchdarkly/react-sdk';

const { value, variationIndex, reason } = useBoolVariationDetail('example-flag-key', false);

import { createLDReactProvider } from '@launchdarkly/react-sdk';

const LDProvider = createLDReactProvider(
  'example-client-side-id',
  { kind: 'user', key: 'example-user-key' },
  {
    ldOptions: {
      useCamelCaseFlagKeys: false,
    },
  },
);

function Root() {
  return (
    <ProdLDProvider>
      <StagingLDProvider>
        <App />
      </StagingLDProvider>
    </ProdLDProvider>
  );
}

import { useBoolVariation } from '@launchdarkly/react-sdk';
import { ProdLDContext, StagingLDContext } from './environments';

function MyComponent() {
  const showInProd    = useBoolVariation('my-feature', false, ProdLDContext);
  const showInStaging = useBoolVariation('my-feature', false, StagingLDContext);
  // ...
}

// app/page.tsx — create the session in a parent component
import { createLDServerSession } from '@launchdarkly/react-sdk/server';

export default async function Page() {
  await ldBaseClient.waitForInitialization({ timeout: 10 });
  createLDServerSession(ldBaseClient, { kind: 'user', key: 'user-key' });

  return <FeatureBanner />;
}

// components/FeatureBanner.tsx — retrieve it in a nested component
import { useLDServerSession } from '@launchdarkly/react-sdk/server';

export default async function FeatureBanner() {
  const session = useLDServerSession();
  if (!session) return null;

  const banner = await session.stringVariation('banner-text', 'Welcome');
  return <h1>{banner}</h1>;
}

import { createLDServerWrapper } from '@launchdarkly/react-sdk/server';

const session = createLDServerWrapper(ldBaseClient, context);