launchdarkly-react

LaunchDarkly SDK wrapper for React intended to provide a modern API and enforce best practices.

Use

Connect to LaunchDarkly with the useLaunchDarklyClient hook and provide the client through context to your app:

import { useLaunchDarklyClient, FeatureFlagsProvider } from '@wisersolutions/launchdarkly'

const App = props => {
  // get `clientKey` and `user` either from `props` or fetch them here with hooks

  // same arguments as `initialize()` from `launchdarkly-js-client-sdk`
  const launchDarklyClient = useLaunchDarklyClient(clientKey, user, options)

  return (
    <FeatureFlagsProvider value={launchDarklyClient}>
      {/* app content */}
    </FeatureFlagsProvider>
  )
}

Then use useFeatureFlag(flagKey: string, defaultValue?: any): any anywhere in your app to get feature flag variation and subscribe to changes:

import { useFeatureFlag } from '@wisersolutions/launchdarkly'

const Component = props => {
  const showFeature = useFeatureFlag('some-boolean-flag-key')
  const otherFeatureVariation = useFeatureFlag('some-multi-variation-flag-key', 'A')
  
  return showFeature ? (
    <Container>
      {{
        A: 'content for variant A',
        B: <div>other content for variant B</div>,
        C: null // no content for variant C
      }[otherFeatureVariation]}
    </Container>
  ) : null
}

See SDK docs for argument details.

Development

Install

Install dependencies using:

npm install

Develop

After you modify sources, run the following (or set up your IDE to do it for you):

• format the code using npm run format
• lint it using npm run lint
• test it using npm test

and fix the errors, if there are any.

Publish

Publishing is done in two steps:

1. Create a new version tag and push it to the repository:

   npm version <patch|minor|major>
   git push --follow-tags

2. Build and publish the new version as a npm package:

   npm publish --access public