react-launch-darkly 🚩

Convenience component for creating a Launch Darkly feature flags context.

values provided on context:

• isReady: boolean indicating connection to LD service has been established.
• all feature flags will be provided directly on the context value as well.

Provider Props

• clientSideId: your launch darkly client id
• initialFlags: the set of flags to use on mount. Example: if you use SSR, you should fetch your initial flags from the API and set them here so that initial render has the correct values. These will get overwritten as necessary from the connection to LD when ready.
• user: (optional) user object to define the user for fetching flags from launch darkly. If none is provided, will default to an anonymous user. See Launch Darkly documentation on user objects

Setup

Import the provider and wrap your application in it.

import { FeatureFlagsProvider } from '@dapperlabs/react-launch-darkly';

function Root() {
  return (
    <FeatureFlagsProvider
      clientSideId={process.env.LAUNCH_DARKLY_CLIENT_SIDE_ID}
      initialFlags={{ foo: 'bar' }}
      user={{
        key: user.id,
        email: user.email,
      }}
    >
      <MyDApp />
    </FeatureFlagsProvider>
  )
}

Context

Context is directly available via import { FeatureFlagsContext } from '@dapperlabs/react-launch-darkly' and can be consumed however you'd like:

• useContext(FeatureFlagsContext) 👈IDEAL 😎
• static contextType = FeatureFlagsContext
• <FeatureFlagsContext.Consumer />

withFeatureFlags

Decorates your component with the above context values as a prop called featureFlags.