Registry / crm-productivity / launchdarkly-react-client-sdk

launchdarkly-react-client-sdk

library3.9.0jsnpmunverified

The `launchdarkly-react-client-sdk` is the official client-side SDK for integrating LaunchDarkly feature flags into React applications. It leverages React's Context API and Hooks to provide a convenient way to access flag values and the LaunchDarkly client instance throughout a component tree. The current stable version is 3.9.0. This SDK typically sees several releases per year, often driven by updates to the underlying `js-client-sdk` and new React features. Key differentiators include its tight integration with React's component lifecycle, providing hooks like `useFlags` and `useLDClient`, and simplifying prop drilling for feature flags. It's designed for modern React development, compatible with React 16.3.0+, with Hooks requiring 16.8.0+.

crm-productivity

npm install launchdarkly-react-client-sdk

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LAUNCHDARKLY-REACT

launchdarkly-react-client-sdk

crm-productivityjavascriptv3.9.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

withLDProvider

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

✗ const { withLDProvider } = require('launchdarkly-react-client-sdk');

This is the primary Higher-Order Component for initializing the SDK and making it available to your React app. ESM is preferred for modern React projects.

useFlags

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

A React Hook to access all available flag values for the current user context. Requires React 16.8.0 or later.

useLDClient

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

A React Hook to get the underlying LaunchDarkly client instance for advanced operations like tracking events or identifying users. Requires React 16.8.0 or later.

asyncWithLDProvider

✓ import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';

Use this function for scenarios where you need to pre-initialize the LaunchDarkly client asynchronously before rendering your React application.

This quickstart initializes the LaunchDarkly SDK using `withLDProvider`, setting up an anonymous user and then demonstrating how to retrieve flag values within a functional component using the `useFlags` hook. It includes basic error handling for a missing client-side ID.

import React from 'react'; import { withLDProvider, useFlags } from 'launchdarkly-react-client-sdk'; const clientSideId = process.env.REACT_APP_LD_CLIENT_SIDE_ID ?? ''; if (!clientSideId) { console.error('LaunchDarkly Client-side ID is not set. Please set REACT_APP_LD_CLIENT_SIDE_ID in your environment variables.'); } interface MyComponentProps { // any props for your component } const MyFeatureComponent: React.FC<MyComponentProps> = () => { const { myFeatureFlag, anotherFlag } = useFlags(); return ( <div> <h1>My Application</h1> {myFeatureFlag ? ( <p>Feature is ON! Displaying content for the feature.</p> ) : ( <p>Feature is OFF. Default content.</p> )} {anotherFlag && <p>Another flag is also ON!</p>} </div> ); }; const MyWrappedComponent = withLDProvider({ clientSideId: clientSideId, user: { key: 'example-user', anonymous: true }, options: { evaluationReasons: true } })(MyFeatureComponent); export default MyWrappedComponent;

Debug

Known issues

gotchaThe React SDK requires a 'Client-side ID', not an 'SDK key' or 'Mobile key', for initialization. Using the wrong key will prevent the SDK from connecting.

fix

Always use the 'Client-side ID' found in your LaunchDarkly project settings. Ensure you are not exposing server-side SDK keys in client-side code.

affects: >=1.0.0

gotchaFor any feature flag to be accessible in the client-side React SDK, the 'Make this flag available to client-side SDKs' checkbox must be enabled on the flag's settings page in the LaunchDarkly dashboard.

fix

Verify flag settings in the LaunchDarkly dashboard. If the flag is not client-side enabled, it will always return the default value provided in your code.

affects: >=1.0.0

breakingUsing React Hooks (e.g., `useFlags`, `useLDClient`) or `asyncWithLDProvider` requires React version 16.8.0 or later. Earlier versions of React will result in runtime errors.

fix

Upgrade your project's `react` and `react-dom` packages to version 16.8.0 or higher. For older React versions, you must use the Higher-Order Component approach without hooks.

affects: >=2.0.0

breakingFrom `launchdarkly-react-client-sdk` v3.3.2 onwards, the build target for ESBuild was explicitly set to ES2015 to ensure broader browser compatibility, overriding potential `tsconfig.json` defaults.

fix

This change is a fix for compatibility. If you are on an older version and facing issues in older browsers with newer JS syntax, ensure your build process targets ES2015 or earlier, or upgrade to v3.3.2+.

affects: >=3.3.2

Errors

Common errors & fixes

Error: React hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks

Attempting to use `useFlags` or `useLDClient` outside a functional React component or with an incompatible React version.

fix

Ensure `useFlags` and `useLDClient` are only called within functional React components. Verify `react` and `react-dom` versions are 16.8.0 or higher.

LaunchDarkly: clientSideId must be specified.

The `clientSideId` property was not provided or was an empty string during the initialization of `withLDProvider` or `asyncWithLDProvider`.

fix

Ensure `clientSideId` is correctly passed to `withLDProvider` or `asyncWithLDProvider`, typically loaded from environment variables (e.g., `process.env.REACT_APP_LD_CLIENT_SIDE_ID`).

Cannot read properties of undefined (reading 'variation')

Attempting to access a flag value from the `ldClient` or `useFlags` before the SDK has fully initialized or if the flag is not found/enabled for client-side SDKs.

fix

Ensure the SDK is fully initialized by checking `isInitialized` from the provider or by using the `waitForInitialization` option. Also, verify the flag exists and is enabled for client-side SDKs in the LaunchDarkly dashboard.

Upgrade

Version history

3.9.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React application integration.

react-domrequiredPeer dependency for React application integration.

Agent activity

43 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/launchdarkly/react-client-sdk ↗

packagehttps://www.npmjs.com/package/launchdarkly-react-client-sdk ↗

homepagehttps://launchdarkly.com ↗