Reactor-feature-toggle NPM

Reactor feature toggle

Your module to handle with feature toggles in ReactJS applications easier.

Why Feature toggle?

This is a common concept, but why use this directive instead solve it via server-side rendering?

The idea of this directive is make this process transparent and easier. So the main point is integrate this directive with other tooling process, such as:

Server-side rendering;
Progressive rendering;
Any other that yoy like :)

You can integrate with WebSockets or handling this in a EventSourcing architecture. It's totally transparent for you and you can integrate easier in your application.

Install

You can get it on NPM installing reactor-feature-toggle module as a project dependency.

npm install reactor-feature-toggle --save
# or
yarn add reactor-feature-toggle

You can also use the standalone UMD build by including dist/reactor-feature-toggle.js in your page. If you do this you'll also need to include the dependencies. For example:

<script src="https://unpkg.com/react@<package-version></package-version>/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@<package-version>/dist/react-dom.js"></script>
<script src="https://unpkg.com/reactor-feature-toggle/dist/umd/reactor-feature-toggle.js"></script>

Setup

You'll need to import FeatureToggleProvider and add it into the root component of your application. So that you can enable/disable features via FeatureToggle component any place in your application.

Also, multiple FeatureToggleProvider are allowed, which gives more flexibility for your application.

import React, { Component } from 'react';
import { FeatureToggleProvider, FeatureToggle } from 'reactor-feature-toggle';

const AppWrapper = () => {
  const featureToggleData = {
    enableMainContent: true,
    enableDescriptionContent: true,
    enableSecondContent: false,
  };

  return (
    <FeatureToggleProvider featureToggleService={featureToggleData}>
      <div>
        <FeatureToggle featureName={'enableMainContent'}>
          <div className="content">
            <p>This content is enabled</p>
            <FeatureToggle featureName={'enableSecondContent'}>
              <p>This content is disabled</p>
            </FeatureToggle>
            <FeatureToggle featureName={'!enableSecondContent'}>
              <p>
                This content is disabled, but should be displayed since it has
                `!` prefix at `featureName`
              </p>
            </FeatureToggle>
          </div>
        </FeatureToggle>

        <FeatureToggle
          featureName={['enableMainContent', 'enableDescriptionContent']}
        >
          <div className="content">
            <p>
              This content is enabled since `enableMainContent` and
              `enableDescriptionContent` are both truthly
            </p>
          </div>
        </FeatureToggle>

        <FeatureToggle
          featureName={['enableMainContent', '!enableDescriptionContent']}
        >
          <div className="content">
            <p>
              This content is disabled because `enableMainContent` is truthly
              and `enableSecondContent` is falsy when using `!` prefix on array
              of configuration passed via props.
            </p>
            <p>
              This can be used as a fallback if both feature toggles are not
              enabled, as an example
            </p>
          </div>
        </FeatureToggle>
      </div>
    </FeatureToggleProvider>
  );
};

export default AppWrapper;