Skip to content

This module is designed to make it easy to use different Feature Toggle providers in a React application, without having to worry about the client implementation details, using declarative markup that is easy to understand even for non-technical users.

License

Notifications You must be signed in to change notification settings

EcovadisCode/featuretoggle-react

Repository files navigation

featuretoggle-react

This module is meant to simplify the usage of Feature Toggles in React, as described in these medium articles:

https://medium.com/ecovadis-engineering/using-feature-toggle-in-a-react-application-part-1-ee34a0e72cf4

https://medium.com/ecovadis-engineering/using-feature-toggle-in-a-react-application-part-2-4e09b46d7ad1

Installation

Install the module using:

npm install --save featuretoggle-react

or:

yarn add featuretoggle-react

Usage

import the required dependencies:

import {
  FeatureToggleWrapper,
  flagsmithClient,
  optimizelyClient, // or alternatively
  launchdarklyClient, // or alternatively
  FeatureToggle,
  On,
  Off,
 } from "featuretoggle-react";

Initialize one of the Clients provided: flagsmithClient, optimizelyClient or launchdarklyClient:

const provider = flagsmithClient({
  environmentID: "xxxxxxxxxxxxxxxxxxxxx"
});

or:

const provider = optimizelyClient({
  audience: 'xxxxxxxxxxxx',
  sdkKey: 'xxxxxxxxxxxxxxx',
});

or:

const provider = launchdarklyClient({
  clientSideId: 'xxxxxxxxxxxxxxxx',
  user: {
    key: 'xxxxxxxxx',
  },
});

Use the FeatureToggle:

export default function App() {
  return (
    <FeatureToggleWrapper provider={provider}>
      <div className="App">
        <p>
          <span>Feature1: </span>
          <FeatureToggle feature="feature1">
            <On>On</On>
            <Off>Off</Off>
          </FeatureToggle>
        </p>
        <p>
          <span>Feature2: </span>
          <FeatureToggle feature="feature2">
            <On>On</On>
            <Off>Off</Off>
          </FeatureToggle>
        </p>
      </div>
    </FeatureToggleWrapper>
  );
}

The featuretoggle-react module will fetch the toggle state from the relevant service provider and display the toggled state according to the received data.

You can also create your own provider along those lines:

const provider = {
  init: (handler) => {
    const featureToggles = {};
    // call your endpoint or insert mock values into featureToggles here
    handler(featureToggles);
  }
};

Warning: reloads and updates are not handled in this version. This is planned for version 2.x. Currently, the feature toggles are fetched and updated only once, when the first <FeatureToggle> element is rendered.

About

This module is designed to make it easy to use different Feature Toggle providers in a React application, without having to worry about the client implementation details, using declarative markup that is easy to understand even for non-technical users.

Topics

Resources

License

Stars

Watchers

Forks