@scimarketview/feature-toggle v3.0.2

FeatureToggle / ReleaseToggle

Leverages React Context API to pass feature flag configuration down through the component tree without having to pass down manually at every level or connecting to a Redux store.

Usage

Wrap app in Provider and provide feature toggle values.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { FeatureToggleProvider } from '@scimarketview/feature-toggle';

const featureToggles = {
  featureA: true,
  featureB: false,
  featureC: false,
};

ReactDOM.render(
  <FeatureToggleProvider value={featureToggles}>
    <App />
  </FeatureToggleProvider>,
  document.getElementById('root'),
);

Use FeatureToggle to wrap any content that should be rendered only when a feature flag is on. A fallback boolean prop may be passed to render content when feature flag is off. Note that for fallback to work properly, the name of the feature being provided must exist. If a feature flag evaluates to false because the feature key does not exist, no fallback content will be rendered.

ReleaseToggleProvider and ReleaseToggle behave in the same way and may be used in conjunction.

// app.js
import React, { Component } from 'react';
import { FeatureToggle } from '@scimarketview/feature-toggle';

const App = () => (
  <div>
    <h1>Hello!</h1>

    <FeatureToggle name="featureA">
      <p>I will render</p>
    </FeatureToggle>

    <FeatureToggle name="featureB">
      <p>I will not render</p>
    </FeatureToggle>

    <FeatureToggle name="featureC">
      <p>I won't render either...</p>
    </FeatureToggle>

    <FeatureToggle name="featureC" fallback>
      <p>... but I will</p>
    </FeatureToggle>

    <FeatureToggle name="featureD" fallback>
      <p>I won't render because featureD is not defined</p>
    </FeatureToggle>
  </div>
);

export default App;

withFeatures / withReleases HOC

In some cases, you may need access to the feature flags more directly. Use withFeatures (and/or withReleases) to access flags in your component. Note that the prop provided is features or releases

import React from 'react';
import { withFeatures, withReleases } from '@scimarketview/feature-toggle';

const App = ({ features, releases }) => (
  <>
    <div>{features.featureA && <h1>I'm behind a feature flag</h1>}</div>
    <div>{releases.featureA && <h1>I'm behind a release flag</h1>}</div>
  </>
);

// may use both at the same time
export default withFeatures(App);
// export default withReleases(App);

API

\

\

\

withFeatures()

\

\

\

withReleases()

To Do:

Random thoughts on what features may be useful in the future (or maybe not).

• Ability to dynamically add additional contexts
• Ability to specify the prop names used for the withHOC components