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

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

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

npm i --save ldclient-react

Or with yarn:

yarn add ldclient-react

Initializing your application

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 'ldclient-react';

const App = () =>
    <Home />

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

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 'ldclient-react';

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 called dev-test-flag in your dashboard before running the example.