launchdarkly-context-provider v1.0.0

LaunchDarklyProvider Component

The LaunchDarklyProvider is a React component that is designed to work with the LaunchDarkly feature flag management system. It initializes the LaunchDarkly client, retrieves feature flags, and provides them to its child components via a context. The component also handles cleanup when it's unmounted.

Using LaunchDarklyProvider Component

To integrate the LaunchDarklyProvider component into your React application, follow these steps:

1. Import Dependencies

First, make sure you've imported the necessary dependencies and custom modules in your React file:

import React from 'react';
import { LaunchDarklyProvider } from 'launchdarkly-context-provider'

2. Define User Context and Feature Flags

Define the user context and initial feature flags you want to use within your application. The user context typically includes a unique user key:

const userContext = {
  key: 'unique_user_key',
  // Add other user context properties as needed
};

const initialFeatureFlags = {
  featureFlag1: false,
  featureFlag2: true,
  // Add other feature flags as needed
};

3. Wrap Your Application with LaunchDarklyProvider

Wrap your application or a specific part of it with the LaunchDarklyProvider. Provide the required props:

• launchDarklyClientSideId: Your LaunchDarkly client-side ID.
• launchDarklyUserContext: The user context you defined in step 2.
• launchDarklyFeatureFlags: The initial feature flags you defined in step 2.

function App() {
  return (
    <LaunchDarklyProvider
      launchDarklyClientSideId="YOUR_CLIENT_SIDE_ID"
      launchDarklyUserContext={userContext}
      launchDarklyFeatureFlags={initialFeatureFlags}
    >
      {/* Your application components go here */}
    </LaunchDarklyProvider>
  );
}

4. Access Feature Flags in Your Components

Within your application components, you can access the feature flags provided by the LaunchDarklyProvider by using the useLaunchDarkly hook.

First, import the useLaunchDarkly hook:

import { useLaunchDarkly } from 'launchdarkly-context-provider'

Then, use the useLaunchDarkly hook to access the feature flags:

function MyFeatureComponent() {
  const featureFlags = useLaunchDarkly();

  // Access individual feature flags as needed
  const isFeatureFlag1Enabled = featureFlags.featureFlag1;
  const isFeatureFlag2Enabled = featureFlags.featureFlag2;

  // Render your component based on feature flag values
  // ...
}

Now your components can make decisions and render content based on the state of your feature flags.