Thin wrapper over the official LaunchDarkly SDK
npm install @lightspeed/react-launch-darkly@lightspeed/react-launch-darkly
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.
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 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 (
);
}
}
`
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 return 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 #### 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 | Please consult the withLDProvider documentation. #### HOC to access all feature flags. Please consult the withLDConsumer documentation. #### 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
render() {
return (
My Page
>
{({ flagValue }) => {
if (flagValue) {
return Feature Active only when flag is on
}If the flag is off or not found, this will render instead
}}
)
}
}
` component.$3
| ---------- | --------------- | ----------------------------------------------------------------- |
| | string | Flag identifier created on the LaunchDarkly web view |children
| | Render Function | React child function. Sends back flagValue (bool or string) |withLDConsumer