React Web SDK reference

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.

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.

Getting started

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

Install the React Web SDK using either npm or yarn:

npm install launchdarkly-react-client-sdk
COPY

Initializing the SDK

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 Initializing using the asyncWithLDProvider function, below.

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, below.

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.

Initializing 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 Configuring 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'),
  );
})();
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 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>
}
COPY

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.

Initializing 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 Configuring 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);
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 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.

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 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);
COPY

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

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

Hooks

The React Web 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 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 Finding 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);
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 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.

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.