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
• Setup
• Usage
• Releases
• Demo

Install

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

npm install reactor-feature-toggle --save

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

Client-side

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';
// `FeatureToggleProvider` and `useFeatureToggle()` is only available on client-side
import { FeatureToggleProvider } from 'reactor-feature-toggle/client';
// `FeatureToggle` is available on both client and server sides
import { 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;

Using useFeatureToggle()

// Make sure your parent component is wrapped with `FeatureToggleProvider` component
import { useFeatureToggle } from 'reactor-feature-toggle';

function Dashboard() {
  const { isOn } = useFeatureToggle();

  // {
  //  enableNewDashboard: true,
  //  enableProPlan: true,
  //  enableBetaFeatures: false,
  // }
  //
  const canAccessNewDashboard = isOn('enableNewDashboard') && isOn('enableProPlan');
  const showBetaFeatures = isOn('enableBetaFeatures');

  if (canAccessNewDashboard) {
    return <div>New Dashboard</div>;
  }

  if (showBetaFeatures) {
    return <div>Beta Feature!</div>;
  }

  return <div>Current Dashboard</div>;
}

Server-Side Usage

For Server-Side Rendering or React Server Components, initialize feature-toggle-service directly without the Provider:

import { set, FeatureToggle } from 'reactor-feature-toggle';

// Initialize feature flags (typically in your root server component)
const featureFlags = {
  enableMainContent: true,
  enableServerSideFeature: true,
  enableNewAPI: false,
};

set(featureFlags);

// Use FeatureToggle component in any Server Component
export default function ServerPage() {
  return 
    (
      <div>
        <h1>ServerPage</h1>
        <FeatureToggle featureName={['enableMainContent']}>
          <div>Main Content visible!</div>
        </FeatureToggle>
      </div>
    );
}

Demo

Try out the demo!

Publish

this project is using np package to publish, which makes things straightforward. EX: np <patch|minor|major>

For more details, please check np package on npmjs.com

Author

Wilson Mendes (willmendesneto)

• http://github.com/willmendesneto