Set up React Web SDK

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// The clientSideID is your SDK key.
18// This value is automatically retrieved from LaunchDarkly.
19createRoot(document.getElementById('root') as HTMLElement).render(
20 <StrictMode>
21 <LDProvider clientSideID="YOUR_CLIENT_SIDE_ID" context={context}>
22 <App />
23 </LDProvider>
24 </StrictMode>,
25);

You can find your server-side SDK key, client-side ID, and mobile key in the Environments section of your Project settings. Use the overflow menu next to the environment name to copy or display the needed key.

The environments list with the overflow menu open.

The Environments list with the overflow menu open.

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