React-lever NPM

React Lever

A library to conditionally render React components based on feature toggles.

React Lever

Installation

npm install react-lever --save

or install with Yarn if you prefer:

yarn add react-lever

Usage

Using Components

Wrap your application in a <LeverProvider>, and your features in a <Lever> like so:

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import Lever, { LeverProvider } from 'react-lever';

function AnimalPhotos() {
  return (
    <Fragment>
      <h1>Photos of animals</h1>

      {/* This will render as enabled=true */}
      <Lever feature="dogs">
        <DogPhotos />
      </Lever>

      {/* This will not render as enabled=false */}
      <Lever feature="cats">
        <CatPhotos />
      </Lever>

      {/* This will not render as cats is disabled (all feature have to be enabled) */}
      <Lever feature={['dogs', 'cats']}>
        <DogPhotos />
        <CatPhotos />
      </Lever>

      {/* This will render as dogs is enabled (at least one feature has to be enabled) */}
      <Lever either feature={['dogs', 'cats']}>
        <DogPhotos />
        <CatPhotos />
      </Lever>

      {/* This will render as enabled=true, but will only render if in a development environment as devOnly=true. */}
      <Lever feature="parrots">
        <ParrotPhotos />
      </Lever>
    </Fragment>
  )
}

const features = {
  dogs: { enabled: true },
  cats: { enabled: false },
  parrots: { enabled: true, devOnly: true }
};

ReactDOM.render(
  <LeverProvider isDev={process.env.APP_ENV === 'development'} features={features}>
    <AnimalPhotos />
  </LeverProvider>,
  document.querySelector('#root')
);

Using Hooks

React Lever also supports React Hooks

import { useLever } from 'react-lever';

function AnimalPhotos() {
  const isDogPhotosEnabled = useLever('dogs');
  const isCatPhotosEnabled = useLever('cat');
  const isDogAndCatPhotosEnabled = useLever(['cat', 'dogs']);
  const isDogOrCatPhotosEnabled = useLever(['cat', 'dogs'], { either: true });
  const isParrotPhotosEnabled = useLever('parrot');
  return (
    <Fragment>
      <h1>Photos of animals</h1>
      {isDogPhotosEnabled && <DogPhotos />}
      {isCatPhotosEnabled && <CatPhotos />}
      {isDogAndCatPhotosEnabled && (
        <Fragment>
          <DogPhotos />
          <CatPhotos />
        </Fragment>
      )}
      {isDogOrCatPhotosEnabled && (
        <Fragment>
          <DogPhotos />
          <CatPhotos />
        </Fragment>
      )}
      {isParrotPhotosEnabled && <ParrotPhotos />}
    </Fragment>
  )
}

`<LeverProvider>` props

isDev

boolean | Optional

Is the app in a development environment?

If false, and a feature is flagged with enabled and devOnly attributes as true, then the feature will not render.

features

{ [feature]: { enabled: boolean, devOnly: boolean } } | Required

The global features of the application.

`<Lever>` props

feature

string | Array<string> | Required

The key (or name) of the feature.

either

boolean | Default: false

If the feature prop is an array & either of the features are enabled, then render the children.

enabled

boolean | Optional

If true, then the feature will render. This prop overrides the enabled flag in the <LeverProvider>'s features.

devOnly

boolean | Optional

If true, then the feature is available to the development environment only (as specified in <LeverProvider>'s isDev prop). This prop overrides the devOnly flag in the <LeverProvider>'s features.