Set up React Web SDK

LaunchDarkly onboarding is not available in federal environments
To learn more, read LaunchDarkly in federal environments.

Install the package

$yarn add launchdarkly-react-client-sdk

Initialize the SDK

React Web SDK initialization
1// Add the code below to the root of your React app.
2import { StrictMode } from 'react';
3import { createRoot } from 'react-dom/client';
4import { LDProvider } from 'launchdarkly-react-client-sdk';
5
6function App() {
7 return <div>Let your feature flags fly!</div>
8}
9
10// A "context" is a data object representing users, devices, organizations, and other entities.
11const context = {
12 kind: 'user',
13 key: 'EXAMPLE_CONTEXT_KEY',
14 email: 'biz@face.dev',
15};
16
17// This is your client-side ID.
18createRoot(document.getElementById('root') as HTMLElement).render(
19 <StrictMode>
20 <LDProvider clientSideID="YOUR_CLIENT_SIDE_ID" context={context}>
21 <App />
22 </LDProvider>
23 </StrictMode>,
24);

You can find your server-side SDK key, client-side ID, and mobile key in the “Resources” section of the help menu. Click the help icon at the bottom left corner of the LaunchDarkly UI, then choose SDK keys:

The SDK keys option in the help menu.

The SDK keys option in the help menu.

To learn more, read Initialize the client in the React Web SDK reference guide.