launchdarkly-react-client-sdk

What is launchdarkly-react-client-sdk?

The launchdarkly-react-client-sdk is a client-side SDK for integrating LaunchDarkly's feature flagging and experimentation capabilities into React applications. It allows developers to control feature releases, perform A/B testing, and manage feature flags in real-time.

What are launchdarkly-react-client-sdk's main functionalities?

Initialize the SDK

This code demonstrates how to initialize the LaunchDarkly SDK in a React application using the `withLDProvider` higher-order component. Replace 'YOUR_CLIENT_SIDE_ID' with your actual LaunchDarkly client-side ID.

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

const App = () => (
  <div>
    <h1>My App</h1>
  </div>
);

export default withLDProvider({
  clientSideID: 'YOUR_CLIENT_SIDE_ID'
})(App);

Use feature flags

This code demonstrates how to use feature flags in a React component with the `useFlags` hook. The `myFeatureFlag` variable will be `true` or `false` based on the feature flag's state in LaunchDarkly.

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

const MyComponent = () => {
  const { myFeatureFlag } = useFlags();

  return (
    <div>
      {myFeatureFlag ? <p>Feature is enabled</p> : <p>Feature is disabled</p>}
    </div>
  );
};

Track custom events

This code demonstrates how to track custom events using the `useLDClient` hook. The `ldClient.track` method sends a custom event to LaunchDarkly, which can be used for analytics and experimentation.

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

const MyComponent = () => {
  const ldClient = useLDClient();

  const handleClick = () => {
    ldClient.track('button-clicked', { customData: 'example' });
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

Other packages similar to launchdarkly-react-client-sdk

unleash-client

Unleash is an open-source feature management solution. The `unleash-client` package provides similar feature flagging capabilities as LaunchDarkly but is self-hosted, giving you more control over your data and infrastructure.

splitio-react

Split.io is another feature flagging and experimentation platform. The `splitio-react` package provides similar functionalities to LaunchDarkly, allowing you to manage feature flags and run experiments in React applications.

README

LaunchDarkly Client-side SDK for React

LaunchDarkly overview

LaunchDarkly is a feature management platform that serves trillions of feature flags daily to help teams build better software, faster. Get started using LaunchDarkly today!

Supported React versions

This version of the LaunchDarkly SDK is compatible with versions 16.3.0 and later of React because it uses React's Context API. However, if you are using the SDK's Hooks API or asyncWithLDProvider, then you must use React version 16.8.0 or later.

Additionally, refer to the JavaScript SDK README to learn more about browser compatibility.

Getting started

Refer to the SDK documentation for instructions on getting started with using the SDK.

Please note that the React SDK has two special requirements in terms of your LaunchDarkly environment. First, in terms of the credentials for your environment that appear on your Account Settings dashboard, the React SDK uses the "Client-side ID"-- not the "SDK key" or the "Mobile key". Second, for any feature flag that you will be using in React code, you must check the "Make this flag available to client-side SDKs" box on that flag's Settings page.

Learn more

Read our documentation for in-depth instructions on configuring and using LaunchDarkly. You can also head straight to the complete reference guide for this SDK or our code-generated API documentation.

This SDK builds upon the JavaScript SDK, supporting all of the same functionality, but using React's Context API to provide additional conveniences. While using this SDK you may need to directly interact with the underlying JavaScript SDK. For more information on how to use the JavaScript SDK and its characteristics, see the SDK's README.

Testing

We run integration tests for all our SDKs using a centralized test harness. This approach gives us the ability to test for consistency across SDKs, as well as test networking behavior in a long-running application. These tests cover each method in the SDK, and verify that event sending, flag evaluation, stream reconnection, and other aspects of the SDK all behave correctly.

Contributing

We encourage pull requests and other contributions from the community. Check out our contributing guidelines for instructions on how to contribute to this SDK.

About LaunchDarkly

• LaunchDarkly is a continuous delivery platform that provides feature flags as a service and allows developers to iterate quickly and safely. We allow you to easily flag your features and manage them from the LaunchDarkly dashboard. With LaunchDarkly, you can:
  • Roll out a new feature to a subset of your users (like a group of users who opt-in to a beta tester group), gathering feedback and bug reports from real-world use cases.
  • Gradually roll out a feature to an increasing percentage of users, and track the effect that the feature has on key metrics (for instance, how likely is a user to complete a purchase if they have feature A versus feature B?).
  • Turn off a feature that you realize is causing performance problems in production, without needing to re-deploy, or even restart the application with a changed configuration file.
  • Grant access to certain features based on user attributes, like payment plan (eg: users on the ‘gold’ plan get access to more features than users in the ‘silver’ plan).
  • Disable parts of your application to facilitate maintenance, without taking everything offline.
• LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read our documentation for a complete list.
• Explore LaunchDarkly
  • launchdarkly.com for more information
  • docs.launchdarkly.com for our documentation and SDK reference guides
  • apidocs.launchdarkly.com for our API documentation
  • blog.launchdarkly.com for the latest product updates