npm package: @lightspeed/react-launch-darkly
Description: Thin wrapper over the official LaunchDarkly SDK
Latest version: 0.3.13

# `@lightspeed/react-launch-darkly`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Freact-launch-darkly.svg)](https://badge.fury.io/js/%40lightspeed%2Freact-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.

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

2. Setup LaunchDarkly within your application.

You may use the [`withLDProvider`](https://github.com/launchdarkly/js-client/tree/master/packages/ldclient-react#withldproviderconfig--clientsideid-string-user-lduser-options-ldoptions-flags-ldflagset-) 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.

```jsx
// _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.

```jsx
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](https://github.com/launchdarkly/js-client/tree/master/packages/ldclient-react#withldconsumeroptions--clientonly-boolean-) 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](https://github.com/launchdarkly/js-client/tree/master/packages/ldclient-react#withldproviderconfig--clientsideid-string-user-lduser-options-ldoptions-flags-ldflagset-) documentation.

#### `withLDConsumer`

HOC to access all feature flags.

Please consult the [withLDConsumer](https://github.com/launchdarkly/js-client/tree/master/packages/ldclient-react#withldconsumeroptions--clientonly-boolean-) documentation.

#### `withLDProvider`

HOC to hook LaunchDarkly's context onto the application.

Please consult the [withLDProvider](https://github.com/launchdarkly/js-client/tree/master/packages/ldclient-react#withldproviderconfig--clientsideid-string-user-lduser-options-ldoptions-flags-ldflagset-) documentation.

**Note.** If the user key is not set, its default value is `1`. Please see the user [documentation on the LaunchDarkly doc](https://docs.launchdarkly.com/docs/node-sdk-reference#section-private-user-attributes).