React Web SDK reference

Overview

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

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

Getting started

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

To install the React SDK, you need your LaunchDarkly environment's client-side ID. Your client-side ID is available under Environments on the Projects tab on the Account settings page.

Install the React SDK using either npm or yarn:

npm install launchdarkly-react-client-sdk
COPY

Initializing the React SDK

After you install the dependency, your code must initialize the React 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.

When you use asyncWithLDProvider, it initializes the React 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 Initializing using the asyncWithLDProvider function.

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 Initializing using the withLDProvider function.

Initializing using asyncWithLDProvider

The asyncWithLDProvider function initializes the React 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 SDK. To learn more, read Configuring the React SDK. 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'),
  );
})();
COPY

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 call asyncWithLDProvider, you can omit the context option. This instantiates the client without explicitly specifying a context. Instead, the React 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>
}
COPY

To learn more, read Identifying and changing contexts.

Initializing using withLDProvider

The withLDProvider function initializes the React 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 Configuring the React SDK. 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);
COPY

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.

Subscribing to flag changes

The React SDK automatically subscribes to flag change events after your app has mounted, which opens a streaming connection. We recommend explicitly enabling streaming mode. To enable streaming mode, specify a streaming: true attribute in your options object. When streaming is disabled, no live updates occur.

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.

Using withLDConsumer

After your code has initialized the React 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);
COPY

Configuring the React 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 SDK. You can use this option to disable automatic camel casing of flag keys when using the React 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.

  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.

• flags: A map of flag keys and default values. If you specify this property, the React SDK will only subscribe to updates to these flags. If you do not specify this property, the React 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 SDK passes each flag's value to the underlying variation call as the default 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
  }
}
COPY

Hooks

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

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 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 SDK to use this custom hook.

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

Flag keys

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 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 SDK changes them to the same camel-case key.
• If a flag key contains three or more capital letters in a row, the React SDK automatically converts all letters between the first and last capital letter to lower case. For example, the React SDK converts a flag with the key devQAFlagTest to devQaFlagTest. If you use devQAFlagTest with the useFlags() hook, the React 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 Finding flag aliases.
• Because the camel-case functionality is implemented in the React 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 React SDK's automatic camel-case feature, provide asyncWithLDProvider or withLDProvider with the reactOptions.useCamelCaseFlagKeys property. The React 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);
COPY

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 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 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

The React SDK (version 2.27 and later) sends flag evaluation events only when a context receives a flag evaluation, not when allFlags is called. The React SDK calls the JavaScript SDK's allFlags method on load to cache flag values. It uses the JavaScript SDK's sendEventsOnlyForVariation option, set to true, to prevent allFlags from sending evaluation events for every flag.

Versions 2.26 and earlier of the React SDK send an evaluation event when a user reads a flag evaluation using allFlags and variation. To recreate this behavior in version 2.27 and later, explicitly set options.sendEventsOnlyForVariation: false and set reactOptions.sendEventsOnFlagRead: false. Version 3 only sends events when a context receives a flag evaluation.

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