react-ld v0.3.1

react-ld

Pass Launch Darkly feature flags through your React application.

Takes a Launch Darkly instantiated client in a provider and enables easy access to feature flags throughout your React application.

Most Launch Darkly React libraries instantiate the client inside the React component. This gives an application less flexibility and control, which can impose constraints given the API provided by the library and you can't pass the client around your application if you have the need in a scaled application.

This library handles just the React part so you don't have to.

Install

Install with yarn

yarn add react-ld

or with npm

npm i react-ld

Usage

// Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { initialize } from 'launchdarkly-js-client-sdk';
import { LdProvider } from 'react-ld';

const LdClient = initialize('my-key', ...otherArgs);

ReactDOM.render(
  <LdProvider client={LdClient}>
    <App />
  </LdProvider>
);

// SomeComponent.js
import React from 'react';
import { useLdFlag } from 'react-ld';

const SomeComponent = () => {
  const myFeature = useLdFlag('myFeature');

  return (
    <div>
      {myFeature ? 'true' : 'false'}
    </div>
  );
};

// AnotherComponent.js
import React from 'react';
import { LdFeature } from 'react-ld';

const SomeComponent = () => (
  <>
    <LdFeature feature="myFeature">
      <VariationA>
    </LdFeature>
    <LdFeature feature="myFeature" deprecation>
      <VariationB>
    </LdFeature>
  </>
);

API

LdProvider

Top level provider component that will cascade feature flags through your React application.

LdFeature

This is the simplest way to render a feature flagged component when you don't need any extra logic.

LdMultivariate

If your flag returns you a multivariate value, you can use this component instead of LdFeature. Which instead of rendering React.Node as the children, it instead expects a function that will be passed the multivariate value.

return (
  <LdMultivariate feature="my-feature">
    {(variation) => {
      if (variation === 'yes') return <YesComp />
      if (variation === 'no') return <NoComp />
      return <MaybeComp />
    }}
  </LdMultivariate>
)

children: (variation: any) => React.Node, feature: string,

useLdFlag

Alternatively to LdFeature or LdMultivariate, you may want to use hooks instead which can be helpful when you want to decide if you want to render a feature programmatically or you want to evaluate multiple flags together instead of nesting a large tree of components.

Context

For advanced usage or building your own functionality, react-ld exposes it's underlying context so you can build your own utilities if necessary.

// Context structure
{
  async: boolean,
  flags: {
    [string]: boolean,
  },
}