*Simple component helpers to support LaunchDarkly in your react app.*
npm install react-launch-darkly
npm install --save react-launch-darklyv16.3.0 or greaterldclient-jsldclient-js needs to be a dependency within the app using react-launch-darklyldclient-js: ^1.1.12 || ^2.0.0LaunchDarkly component wrapper, you'll probably want to include it in a top-leveljavascript
// MasterLayout.js
import React, { Component } from "react";
import { LaunchDarkly } from "react-launch-darkly";export default class MasterLayout extends Component {
render () {
return (
{this.props.children}
);
}
}
`Then in your lower-level components, to make use of the
component:
`javascript
// Home.js
import React, { Component } from "react";
import { FeatureFlag } from "react-launch-darkly";export default class Home extends Component {
render () {
return (
renderFeatureCallback={this._renderFeature}
/>
);
} _renderFeature () {
return (
Your new feature!
);
}
}
`Docs
- LaunchDarkly component
- FeatureFlag component
- SSR Support
- Overriding Feature Flags
- Identifying new users---
$3
Main component that initializes the LaunchDarkly js-client.#### props
#####
: string (required)
This is the client id that is provided to you by LaunchDarkly.#####
user : object (required)
See the LaunchDarkly docs for more info.#####
clientOptions : object (optional)Options that are passed to the LaunchDarkly JS client for additional configuration and features:
- Bootstrapping
- Secure Mode
- Setting LaunchDarkly Enterprise URLs
---
$3
Note that this component has to be rendered as a child of LaunchDarkly#### props
#####
: string (required)
The flagKey prop is the feature flag key you defined in LaunchDarkly.#####
renderFeatureCallback : function (required)
The main callback function that renders your feature. In typical scenarios where your flag is a boolean,
you can simply create your function to return the necessary JSX:
`javascript
// Example FeatureFlag component
// Callback function
_renderFeature () {
return (
New Feature Here!);
}
`##### Multivariate Flag Support
When using a multivariate feature flag, the
prop will pass the value of
the flag as an argument to your callback function:
`javascript
// Example FeatureFlag component
// Callback function with feature flag value passed in
_renderFeature (featureFlagValue) {
if (featureFlagValue === "A") {
return (
Bucket "A" Feature!);
} return (
Default Bucket Feature Here!);
}
`####
: function (optional)
Since the feature flags are requested from LaunchDarkly after DOM load, there may be some latency in the rendering. This render callback allows you to provide some sort of feedback to indicate loading, e.g., the typical spinning loader.####
renderDefaultCallback : function (optional)
This callback is provided for cases where you want to render something by default, think of it when your feature flag is "off" or falsy.---
$3
SSR is opt-in and you need to specify the initial set of feature flag keys and values through
the bootstrap property on clientOptions:
`javascript
// currentUser.featureFlags
// >> { "your-feature-flag": true }
const clientOptions = {
bootstrap: currentUser.featureFlags
};
`What this gives you is that on SSR, we use the set of feature flags found on
to render
your FeatureFlag component. When your FeatureFlag component is mounted, it will then initialize
the LaunchDarkly js-client and make the proper XHRs to LaunchDarkly to populate the available
feature flags within js-client's internal state. Thus taking precedence over the feature flags
present in bootstrap.#### Disable LaunchDarkly js-client Initialization (Preventing XHRs)
In the event that you opt-in for SSR, you may not want to make any additional XHRs to LaunchDarkly
since you already have the feature flags provided from your server through
bootstrap, you can
disable this by supplying disableClient: true:
`javascript
const clientOptions = {
bootstrap: currentUser.featureFlags,
disableClient: true
};
`---
$3
If you need to temporarily override the variation reported by a feature flag for
testing or demonstration purposes, you can do so using special query parameters
in the request URL. This can be useful for seeing the possible effects of
enabling a feature flag or to force a specific variation of a multivariate flag.
Do note that overriding a feature flag does not report it to LaunchDarkly nor does it persist.
It's merely a mechanism for testing or demonstration purposes. One notable use-case is in
integration and/or end-to-end testing.
#### Enabling Boolean Feature Flags
You can enable a set of boolean feature flags with a comma-delimited list in the
query parameter:`
// Overrides the boolean feature flag, setting it to true
http://localhost/users?features=send-onboarding-email
// Enables the , user-nicknames, and hide-inactive-users feature flags
http://localhost/users/101?features=show-user-email,user-nicknames,hide-inactive-users
`#### Advanced Feature Flag Overriding
If you need to temporarily set a boolean feature flag to
or override the
variation reported by a multivariate feature flag, you can use
features.{feature_flag} query parameters:`
// Disables the feature flag and sets the email-frequency variation to "weekly"
http://localhost/users?features.verify-email=false&features.email-frequency=weekly
`The values "true" and "false" are converted into
and false boolean
values. If the query parameter value is omitted, then the feature flag will be
reported as enabled:`
// Enables the feature flag
http://localhost/users/101?features.show-user-email
`#### Examples
// Overrides the boolean feature flag, setting it to true
http://localhost/users?features=send-onboarding-email// Enables the
, user-nicknames, and hide-inactive-users feature flags
http://localhost/users/101?features=show-user-email,user-nicknames,hide-inactive-users// Disables the
verify-email feature flag and sets the email-frequency variation to "weekly"
http://localhost/users?features.verify-email=false&features.email-frequency=weekly// Enables the
show-user-email feature flag
http://localhost/users/101?features.show-user-email
`---
$3
If you need to change the configured user for the launch darkly client you can do that by calling
.
`
import { identify } from "react-launch-darkly";identify(launchDarklyClientKey, launchDarklyUser, optionalUserHash);
See Launch Darkly's documentation for more information.