No results for ""
EXPAND ALL
  • Home
  • API docs

GIVE DOCS FEEDBACK

React Web SDK reference

Read time: 16 minutes
Last edited: May 24, 2024
The React Web SDK does not work in React Native projects

If you want to add LaunchDarkly to your React Native codebase, use the React Native SDK instead. The React Web SDK is intended for use in web applications, and the React Native SDK is specifically designed to run in mobile environments. To learn more, read React Native SDK.

Version 3 of the React Web SDK replaces users with contexts

In LaunchDarkly, a context is a generalized way of referring to the people, services, machines, or other resources that encounter feature flags in your product. Contexts replace another data object in LaunchDarkly: "users." LaunchDarkly contexts are unrelated to the React Context API and the React Context method.

Code samples on this page are from the two most recent SDK versions where they differ. To learn more about upgrading, read React Web SDK 2.x to 3.0 migration guide and Best practices for upgrading users to contexts.

Overview

This topic documents how to get started with the client-side React Web SDK, and links to reference information on all of the supported features.

SDK quick links

LaunchDarkly's SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and a sample application:

ResourceLocation
SDK API documentationSDK API docs
GitHub repositoryreact-client-sdk
Sample applicationReact Web
Published modulenpm

The sample code snippets for this SDK are in JavaScript. To learn more about using TypeScript with the React Web SDK, read Importing types and Using LaunchDarkly with TypeScript.

The React Web SDK is based on the JavaScript SDK

The React Web SDK builds on LaunchDarkly's JavaScript SDK to provide a better integration for use in React applications. As a result, much of the JavaScript SDK functionality is also available for the React Web SDK to use. For a complete client-side JavaScript SDK reference, read JavaScript SDK reference.

SDK version compatibility

The LaunchDarkly React Web SDK versions 3.0 and higher are compatible with React version 16.3.3 and higher.

The LaunchDarkly React Web SDK versions 2.x are compatible with React version 16.3.0 and higher.

The LaunchDarkly React Web SDK offers two custom hooks. If you want to use these, then you must use React version 16.8.0 or higher. To learn more, read Hooks.

The LaunchDarkly React Web SDK version 3.0.0 uses optional chaining. If you encounter an error related to optional chaining during transpiling, bundling, or running tests, updating to version 3.0.2 should resolve the error.

Get started

After you complete the Get started process, follow these instructions to start using the LaunchDarkly React Web SDK in your React code.

Install the SDK

Install the React Web SDK using either npm or yarn:

npm install launchdarkly-react-client-sdk

Initialize the client

After you install the dependency, your code must initialize the React Web SDK before it can evaluate flags. You can do this in one of two ways:

  • To render your app only after SDK initialization is complete, use await with asyncWithLDProvider
  • To render your app first, and then initialize the SDK and process flag updates, use withLDProvider

Both functions rely on React's Context API, which lets you access your flags from any level of your component hierarchy. The React Context API is unrelated to LaunchDarkly contexts.

When you use asyncWithLDProvider, it initializes the React Web SDK and returns a provider which is a React component. If you use the asyncWithLDProvider function with await, the rendering of your React app is delayed until SDK initialization completes. Depending on your network conditions, this may take a couple hundred milliseconds. After initialization is complete, your flags and the LaunchDarkly client become available at the start of your React app lifecycle. This ensures that your app does not flicker due to flag changes at startup time. To learn more, read Initialize using the asyncWithLDProvider function, below.

Preventing flicker on page load

Initializing with asyncWithLDProvider can help prevent a flicker on page load if you are using default flag values. To learn more, read Eliminating flicker when using default flag values.

When you use withLDProvider, it initializes the underlying JavaScript SDK at componentDidMount. This means your flags and the LaunchDarkly client only become available after your app has mounted. Use this method if you prefer to render your app first, and then process flag updates after rendering is complete. You can also optionally defer initialization further, until after you define a context. Because your app renders before initialization, using withLDProvider can result in a flicker due to flag changes at startup time. To learn more, read Initialize using the withLDProvider function, below.

The React Web SDK uses a client-side ID

The React Web SDK uses a client-side ID. Your environment's client-side ID is available in the Projects tab of your Account settings page. To learn more about key types, read Keys.

To initialize the React Web SDK, you need your LaunchDarkly environment's client-side ID. This authorizes your application to connect to a particular environment within LaunchDarkly.

Never embed a server-side SDK key into a client-side application

Client-side IDs are not secret and you can expose them in your client-side code without risk. However, never embed a server-side SDK key into a client-side application.

Initialize using asyncWithLDProvider

The asyncWithLDProvider function initializes the React Web SDK and returns a Context.Provider, which is a React component. It is an asynchronous function. You must initialize asyncWithLDProvider at the app entry point, prior to rendering, to ensure that flags and the LaunchDarkly client are ready at the start of your React app lifecycle.

The asyncWithLDProvider function accepts an AsyncProviderConfig object, which provides configuration options for the React Web SDK. To learn more, read Configure the SDK, below. One of these configuration options is the options field, which lets you customize your client. To learn more, read about Configuration for the JavaScript SDK.

Here's how to initialize using asyncWithLDProvider:

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
(async () => {
const LDProvider = await asyncWithLDProvider({
clientSideID: 'client-side-id-123abc',
context: {
"kind": "user",
"key": "user-key-123abc",
"name": "Sandy Smith",
"email": "sandy@example.com"
},
options: { /* ... */ }
});
render(
<LDProvider>
<YourApp />
</LDProvider>,
document.getElementById('reactDiv'),
);
})();
Omitting the kind creates a user object, not a context

If you omit the kind attribute when you create a context, then LaunchDarkly will assume the context kind is "user" when evaluating flags. Additionally, the SDK will assume you are working with a user object, rather than a context.

Overall, this should make your upgrade easier, because your existing code will continue to work, as long as you don't make changes to your flag configuration or bucket users based on the "secondary" attribute.

However, if you are using version 3.0 of the SDK and you are omitting the kind attribute, then the following caveats apply:

  • The fields in your user object must be LDUser fields, not LDContext fields. For example, to mark an attribute as private, you must use privateAttributeNames in the user object, not _meta.privateAttributes as you would for a context object. To learn more, read Understanding changes to private attributes.
  • Any additional attributes in your user object need to be inside the custom property of the LDUser, not at the top-level as they would in a context object. To learn more, read Working with built-in and custom attributes.

We strongly recommend upgrading your SDK to take advantage of the context functionality.

Identify the context



After initialization is complete, your flags and the client are available at the start of your React app lifecycle. This ensures your app does not flicker due to flag changes at startup time.

If your app does not yet have the context when you initialize, you can omit the context option. This instantiates the client without explicitly specifying a context. Instead, the React Web SDK uses an anonymous context. Later, when you have the context, you can call identify.

Here's how to identify the context after initialization:

// app.js
import React, { useEffect } from 'react';
import { useFlags, useLDClient } from 'launchdarkly-react-client-sdk';
export default function App {
const flags = useFlags();
const ldClient = useLDClient();
useEffect(() => {
ldClient.identify({ key: 'context-key-123abc' });
}, []);
return <div>Let your feature flags fly!</div>
}

This example uses asyncWithLDProvider, but you can also omit the context option when you initialize using withLDProvider and then identify the context after initialization. To learn more, read Identifying and changing contexts.

This function requires React 16.8.0 or later

The asyncWithLDProvider function uses the Hooks API, which requires React version 16.8.0 or later.

Initialize using withLDProvider

The withLDProvider function initializes the React Web SDK and wraps your root component in a Context.Provider, which is a React component.

The withLDProvider function accepts a ProviderConfig object, which provides configuration properties for the React SDK. In the example below, the context property is specified. Alternatively, you could set the deferInitialization property, and defer initialization until after you define the context property. To learn more, read Configure the SDK, below. Another of these configuration properties is the options field, which lets you customize your client. To learn more, read about Configuration for the JavaScript SDK.

Here's how to initialize using withLDProvider:

import { render } from 'react-dom';
import { withLDProvider } from 'launchdarkly-react-client-sdk';
import App from './App';
const LDProvider = withLDProvider({
clientSideID: 'client-side-id-123abc',
context: {
"kind": "user",
"key": "user-key-123abc",
"name": "Sandy Smith",
"email": "sandy@example.com"
},
options: { /* ... */ }
})(App);
const rootElement = document.getElementById("root");
render(<LDProvider />, rootElement);

After initialization is complete, your flags and the client are only available after your app has mounted. Use this method if you prefer to render your app first, and then process flag updates after rendering is complete.

Subscribe to flag changes

The React Web SDK automatically subscribes to flag change events after your app has mounted, which opens a streaming connection.

In some cases, streaming may not be necessary. For example, if you reload your entire application on each update, you will get all the flag values again when the client is re-initialized. In this situation, we recommend disabling streaming mode. To disable streaming mode, specify a streaming: false attribute in your options object. When streaming is disabled, no live updates occur.

In other cases, streaming may be required. Subscribing to streaming is the only way to receive real-time updates. If you determine that streaming is necessary for your application, we recommend explicitly enabling streaming mode. To enable streaming mode, specify a streaming: true attribute in your options object.

Making feature flags available to this SDK

You must make feature flags available to client-side SDKs before the SDK can evaluate those flags. If an SDK tries to evaluate a feature flag that is not available, the context will receive the fallback value for that flag.

To make a flag available to this SDK, check the SDKs using Client-side ID checkbox during flag creation, or on the flag's Settings tab. To make all of a project's flags available to this SDK by default, check the SDKs using Client-side ID checkbox in your project Settings.

This behavior is different from the JavaScript SDK, where you need to opt in to event listening. To learn more about how the JavaScript SDK handles flag change events, read Subscribing to flag changes.

Access flag values

After your code has initialized the React Web SDK, use withLDConsumer to access flag values and the LaunchDarkly client. The return value of withLDConsumer is a wrapper function that takes your component and returns a React component injected with flags and ldClient as props.

Here's how:

import { withLDConsumer } from 'launchdarkly-react-client-sdk';
const Home = ({ flags, ldClient /*, ...otherProps */ }) => {
// You can call any of the methods from the JavaScript SDK
// ldClient.identify({...})
return flags.devTestFlag ? <div>Flag on</div> : <div>Flag off</div>;
};
export default withLDConsumer()(Home);

Configure the SDK

The AsyncProviderConfig object specifies configuration for the asyncWithLDProvider function and the ProviderConfig object specifies configuration for the withLDProvider function.

The only difference between AsyncProviderConfig and ProviderConfig is that AsyncProviderConfig does not have the deferInitialization property, because asyncWithLDProvider cannot be deferred. You must initialize asyncWithLDProvider at the app entry point prior to rendering to ensure flags and the client are ready at the start of your React app lifecycle.

The only mandatory property is the client-side ID. All other properties are optional.

These are the properties:

  • clientSideID: This is your project and environment specific client-side ID. This property is mandatory.

  • context: A LaunchDarkly context object. This property is optional unless you are initializing in secure mode, in which case it is mandatory. Defaults to an anonymous user.

  • options: The LaunchDarkly JavaScript SDK initialization options. This property is optional.

  • reactOptions: This property is specific to the React Web SDK. You can use this option to disable automatic camel casing of flag keys when using the React Web SDK, or to disable evaluation events on read. This property is optional.

  • deferInitialization: This property allows you to defer SDK initialization until you define the context property. This property is optional, and is only available in ProviderConfig, when you initialize using withLDProvider.

  • timeout:The amount of time, in seconds, to wait for the SDK to initialize. This gets passed to the underlying Javascript SDK waitForInitialization function. This property is optional, however, we strongly recommend setting a value of 1-5 seconds. To learn more, read Initialize the client.

    By deferring SDK initialization, you defer all steps which take place as part of SDK initialization, including reading flag values from local storage and sending the SDK's ready event.

    However, even if you defer SDK initialization, the SDK continues to load bootstrapped flag values as long as you provide the bootstrapped values as a map of flag keys and values. If you indicate that the SDK should bootstrap flags from local storage, this will not happen until the SDK initializes.

    To learn more, read waitForInitialization and How to defer initialization of the React SDK.

  • flags: A map of flag keys and fallback values. If you specify this property, the React Web SDK will only subscribe to updates to these flags. If you do not specify this property, the React Web SDK subscribes to all flags. This property is optional.

    Specify the flags property as a map of flag keys and values. The flag keys must be in their original form as known to LaunchDarkly, rather than in their camel-cased form. The React Web SDK passes each flag's value to the underlying variation call as the fallback value to use in case of an error. To learn more, read Evaluating flags for the JavaScript SDK.

The following is an example ProviderConfig object including each of the above properties:

{
clientSideID: "client-side-id-123abc",
context: {
kind: "user",
key: "user-key-123abc",
name: "Sandy Smith",
email: "sandy@example.com"
},
options: {
bootstrap: "localStorage"
},
reactOptions: {
useCamelCaseFlagKeys: false
},
deferInitialization: false,
flags: {
"bool-flag-key-123abc": true,
"numeric-flag-key-123abc": 5
}
}

Hooks

The React Web SDK offers two custom hooks which you can use as an alternative to withLDConsumer: useFlags and useLDClient.

These functions require React 16.8.0 or later

Both useFlags and useLDClient use the Hooks API, which requires React version 16.8.0 or later.

useFlags is a custom hook which returns all feature flags. It uses the useContext primitive to access the LaunchDarkly context set up by asyncWithLDProvider or withLDProvider. You still must use the asyncWithLDProvider or the withLDProvider higher-order component at the root of your application to initialize the React Web SDK and populate the context with the client and your flags.

useLDClient is a custom hook which returns the underlying LaunchDarkly JavaScript SDK client object. Like the useFlags custom hook, useLDClient also uses the useContext primitive to access the LaunchDarkly context set up by asyncWithLDProvider or withLDProvider. You still must use the asyncWithLDProvider or the withLDProvider higher-order component to initialize the React Web SDK to use this custom hook.

For an example of how to use a custom hook, read HooksDemo.

Flag keys in the React Web SDK

LaunchDarkly primarily identifies feature flags by a key which must contain only alphanumeric characters, dots (.), underscores (_), and dashes (-). These keys are used in the SDKs to identify flags, and in LaunchDarkly's REST API.

However, in JavaScript, accessing keys containing . and - requires the bracket operator. Instead of requiring this, the React Web SDK automatically changes all flag keys to camel case by default. A flag with key dev-flag-test is accessible as flags.devFlagTest.

Automatically changing flag keys to camel case poses some problems:

  • It is possible to induce a key collision if there are multiple LaunchDarkly flag keys which resolve to the same camel-case key. For example, dev-flag-test and dev.flag.test are unique keys in LaunchDarkly, but the React Web SDK changes them to the same camel-case key.
  • If a flag key contains three or more capital letters in a row, the React Web SDK automatically converts all letters between the first and last capital letter to lower case. For example, the SDK converts a flag with the key devQAFlagTest to devQaFlagTest. If you use devQAFlagTest with the useFlags() hook, the SDK will not find the flag.
  • LaunchDarkly's code references tool expects your source code to reference the exact key, not a camel-case equivalent. The tool does not detect keys that were automatically changed to camel-case. However, you can configure an alias to ensure that the code references tool detects the camel-case equivalents. To learn more, read Find flag aliases.
  • Because the camel-case functionality is implemented in the React Web SDK instead of in the underlying JavaScript SDK, the underlying client object and functionality provided by the JavaScript SDK reflect flag keys in their original format. Only React-specific contexts such as your injected props use camel case.

To disable the SDK's automatic camel-case feature, provide asyncWithLDProvider or withLDProvider with the reactOptions.useCamelCaseFlagKeys property. The SDK supports this in versions 2.13.0 and later.

Here's how to configure the automatic camel-case feature:

export default withLDProvider({
clientSideID: 'client-side-id-123abc',
reactOptions: {
useCamelCaseFlagKeys: false
}
})(App);

With this configuration option in place, you can access your dev-flag-test flag using bracket notation, for example, flag['dev-flag-test'].

If you enable the automatic camel-case feature and you want to use LaunchDarkly's code references tool, you can configure alias support to find camel-cased flags. To do so, use the value camelCase for the alias settings.

Example app

Run this example for a fully working single page app with React and react-router. You must enter your clientSideId in the client root app file and create a flag with key dev-test-flag in your flags list before running the example.

Importing types

In addition to its own bundled types, the React Web SDK uses types from launchdarkly-js-client-sdk. If you use Typescript and you need to use launchdarkly-js-client-sdk types, you can install the launchdarkly-js-client-sdk package as a dev dependency. You can then import the types you want directly from launchdarkly-js-client-sdk.

If you are using the React Web SDK within a React application that uses TypeScript, you may encounter some compiler errors or warnings initially. One solution is to wrap your component in a withLDProvider function, and then coerce your component to type <ComponentType<{}>. To learn how, read Using LaunchDarkly with TypeScript.

If you use eslint, the SDK requires that you add launchdarkly-js-client-sdk as a dev dependency. Otherwise, eslint will report a no-extraneous-dependencies error.

Events

Versions 2.27 and later of the React Web SDK send evaluation events when your app accesses a flag from the flags object obtained by using useFlags or withLDConsumer, and when you call a variation method on the LDClient.

In versions 2.26 and earlier of the React Web SDK, you must make variation calls directly to send evaluation events.

Experimentation events

Setting reactOptions.sendEventsOnFlagRead: false could prevent Experimentation events from recording correctly. Always confirm that this option is disabled when troubleshooting experiments.

To learn more about the sendEventsOnlyForVariation option, read the JavaScript SDK API documentation. To learn more about the sendEventsOnFlagRead option, read the React Web SDK API documentation.

Do Not Track and ad blocking software

The React Web SDK respects the Do Not Track events header. If an end user has Do Not Track enabled in their browser, the SDK does not send analytics events for flag evaluations or metrics to events.launchdarkly.com. To learn more, read Browser privacy settings block analytic events to LaunchDarkly.


In addition, ad blocking software may block analytics events from being sent. This does not impact feature flag evaluations. To learn more about the events SDKs send to LaunchDarkly, read Analytics events.