callstack/react-launch-darkly

Name: react-launch-darkly

Owner: Callstack

Description: null

Forked from: TrueCar/react-launch-darkly

Created: 2017-01-30 09:59:34.0

Updated: 2018-05-15 23:50:26.0

Pushed: 2017-02-07 11:16:06.0

Homepage: null

Size: 114

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

React-Launch-Darkly

Simple component helpers to support LaunchDarkly in your react app.

Features

Supports bare minimum usage of LaunchDarkly, take a look at this issue to see what we don't support, yet. If you'd like to see a feature implemented, feel free to submit a PR and we'll have a look.

Usage

To setup the LaunchDarkly client container, you'll probably want to include it one of your top-level layout components:

asterLayout.js
rt React, { Component, PropTypes } from "react";
rt { LaunchDarkly } from "react-launch-darkly";

rt default class MasterLayout extends Component {
nder () {
return (
  <div>
    <LaunchDarkly clientId={YOUR_LAUNCH_DARKLY_CLIENT_ID} user={{ key: "YOUR_USER_KEY" }}>
      {this.props.children}
    </LaunchDarkly>
  </div>
);

Then in your lower-level components, if you wanted to feature flag a specific feature:

ome.js
rt React, { Component } from "react";
rt { FeatureFlag } from "react-launch-darkly";

rt default class Home extends Component {
nder () {
return (
  <div>
    <FeatureFlag
      // This is the feature flag key you defined in LaunchDarkly
      flagKey="home-test"

      // What to render if the feature is "on"
      renderFeatureCallback={this._renderFeature}

      // (Optional) If you want to have a fallback of some sort when the feature is "off"
      renderDefaultCallback={this._renderDefault}

      // (Optional) Since the feature flags are requested from LaunchDarkly after DOM load,
      // there might be some latency in the rendering. This render callback allows you to
      // provide some sort of feedback to indicate loading or perhaps a placeholder to avoid
      // a FOUC or a jump in element rendering.
      initialRenderCallback={this._initialRender}
    />
  </div>
);


nitialRender () {
return (
  <div>Loading?</div>
);


enderFeature () {
return (
  <div>The feature is turned on</div>
);


enderDefault () {
return (
  <div>_default_</div>
);