This module is meant to simplify the usage of Feature Toggles in React, as described in these medium articles:
Install the module using:
npm install --save featuretoggle-react
or:
yarn add featuretoggle-react
import the required dependencies:
import{FeatureToggleWrapper,flagsmithClient,optimizelyClient,// or alternativelylaunchdarklyClient,// or alternativelyFeatureToggle,On,Off,}from"featuretoggle-react";Initialize one of the Clients provided: flagsmithClient, optimizelyClient or launchdarklyClient:
constprovider=flagsmithClient({environmentID: "xxxxxxxxxxxxxxxxxxxxx"});or:
constprovider=optimizelyClient({audience: 'xxxxxxxxxxxx',sdkKey: 'xxxxxxxxxxxxxxx',});or:
constprovider=launchdarklyClient({clientSideId: 'xxxxxxxxxxxxxxxx',user: {key: 'xxxxxxxxx',},});Use the FeatureToggle:
exportdefaultfunctionApp(){return(<FeatureToggleWrapperprovider={provider}><divclassName="App"><p><span>Feature1: </span><FeatureTogglefeature="feature1"><On>On</On><Off>Off</Off></FeatureToggle></p><p><span>Feature2: </span><FeatureTogglefeature="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:
constprovider={init: (handler)=>{constfeatureToggles={};// call your endpoint or insert mock values into featureToggles herehandler(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.