@lightspeed/react-launch-darkly

Introduction

A small lightweight wrapper on top of the official LaunchDarkly React library.

It introduces a small utility component and re-exposes the same exports of the official LaunchDarkly React library.

Quick Start

1. Install the dependencies in your webapp.

yarn add ldclient-react @lightspeed/react-launch-darkly

2. Setup LaunchDarkly within your application.

You may use the withLDProvider HOC to properly hook to the LaunchDarkly API.

In a NextJS application, you'll most likely want to use the HOC at the _app.js level of your application.

// _app.js
import React from 'react';
import App, { Container } from 'next/app';
import { LaunchDarklyProvider } from '@lightspeed/react-launch-darkly';

class NextApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <LaunchDarklyProvider clientSideID="INSERT_YOUR_ID_HERE">
          <Component {...pageProps} />
        </LaunchDarklyProvider>
      </Container>
    );
  }
}

3. Use the FeatureFlag component to retrieve whether or not a flag is active.

import React from 'react';
import { FeatureFlag } from '@lightspeed/react-launch-darkly';

export default class extends React.Component<Props> {
  render() {
    return (
      <div>
        <h1>My Page</h1>
        <FeatureFlag
          flagKey="my-flag-key"
        >
        {({ flagValue }) => {
          if (flagValue) {
            return <div>Feature Active only when flag is on</div>
          }

          return <div>If the flag is off or not found, this will render instead</div>
        }}
        </FeatureFlag>
      <div>
    )
  }
}

Alternatively

You can also use LaunchDarkly's consumer HOC to accomplish this.

Please consult the withLDConsumer documentation, as the API differs from what is being offered by the FeatureFlag component.

Components

<FeatureFlag>

A small conversion of withLDConsumer HOC into a more consumer friendly component.

This component roughly matches the API of the previously established LocalStorageFeatureFlag component.

| Prop | Type | Description | | ---------- | --------------- | ----------------------------------------------------------------- | | flagKey | string | Flag identifier created on the LaunchDarkly web view | | children | Render Function | React child function. Sends back flagValue (bool or string) |

Please consult the withLDProvider documentation.

withLDConsumer

HOC to access all feature flags.

Please consult the withLDConsumer documentation.

withLDProvider

HOC to hook LaunchDarkly's context onto the application.

Please consult the withLDProvider documentation.

Note. If the user key is not set, its default value is 1. Please see the user documentation on the LaunchDarkly doc.