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.
2 import { StrictMode } from 'react';
3 import { createRoot } from 'react-dom/client';
4 import { LDProvider } from 'launchdarkly-react-client-sdk';
5 
6 function 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.
11 const context = {
12   kind: 'user',
13   key: 'EXAMPLE_CONTEXT_KEY',
14   email: 'biz@face.dev',
15 };
16 
17 // This is your client-side ID.
18 createRoot(document.getElementById('root') as HTMLElement).render(
19   <StrictMode>
20     <LDProvider clientSideID="YOUR_CLIENT_SIDE_ID" context={context}>
21       <App />
22     </LDProvider>
23   </StrictMode>,
24 );

Finding your SDK credentials

You can find your server-side SDK keys, mobile keys, and client-side ID on the SDK keys page under Settings.

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

1	// Add the code below to the root of your React app.
2	import { StrictMode } from 'react';
3	import { createRoot } from 'react-dom/client';
4	import { LDProvider } from 'launchdarkly-react-client-sdk';
5
6	function 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.
11	const context = {
12	kind: 'user',
13	key: 'EXAMPLE_CONTEXT_KEY',
14	email: 'biz@face.dev',
15	};
16
17	// This is your client-side ID.
18	createRoot(document.getElementById('root') as HTMLElement).render(
19	<StrictMode>
20	<LDProvider clientSideID="YOUR_CLIENT_SIDE_ID" context={context}>
21	<App />
22	</LDProvider>
23	</StrictMode>,
24	);