LaunchDarkly Developer Documentation

Get started in under 30 minutes.
LaunchDarkly provides feature flags as a service for Java · Python · Ruby · Go · Node.js · PHP · .NET. Control feature launches -- who sees what and when -- without multiple code deploys. Easy dashboard for phased rollouts, targeting and segmenting.
Need more help? write us at support@launchdarkly.com

Get Started    Guides

React SDK Reference

This reference guide documents all of the methods available in our client-side React SDK, and explains in detail how these methods work. If you want to dig even deeper, our SDKs are open source — head to the React Wrapper code in our JavaScript SDK GitHub repository to look under the hood.

Requires React 16.3.0 or later

This SDK uses the Context API, which requires React version 16.3.0 or later.

The React SDK builds on top of our JavaScript SDK to provide better integration for use in React applications.

For a complete client-side JavaScript SDK reference, please refer to our documentation.

Getting started

Building on top of our Quickstart guide, the following steps will get you started with using the LaunchDarkly SDK in your React code.

You can use either npm or yarn to install the React SDK:

npm i --save launchdarkly-react-client-sdk
yarn add launchdarkly-react-client-sdk

Once the dependency is installed, you'll want to initialize the LaunchDarkly client. To create a client instance, you need your environment's client-side ID (available on your account settings page). Client-side IDs are not secret-- they can be safely exposed in your client-side code.

The React SDK relies on the Context API to make it easy for you to access your flags from any level of your component hierarchy. The withLDProvider function initializes the JavaScript SDK, and wraps your root component in a Context.Provider:

import { withLDProvider } from 'launchdarkly-react-client-sdk';

const App = () =>
  <div>
    <Home />
  </div>;

export default withLDProvider({ 
  clientSideID: 'your-client-side-id',
  options: { /* ... */ }
})(App);

Customizing your client can be done via the options field. See the JavaScript SDK reference for all the available options.

Anywhere you need flags, call withLDConsumer with your component. This will expose your flags via the flags prop:

import { withLDConsumer } from 'launchdarkly-react-client-sdk';

const Home = ({ flags }) => {
  return flags.devTestFlag ? <div>Flag on</div> : <div>Flag off</div>;
};

export default withLDConsumer()(Home);

Example App

Check the example for a fully working single page app with react and react-router. You'll need to enter your clientSideId in the client root app file and create a flag with key dev-test-flag in your dashboard before running the example.


React SDK Reference


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.