A library to conditionally render React components based on feature toggles.
npm install react-lever --save
or install with Yarn if you prefer:
yarn add react-lever
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=false */}
<Lever disabled feature="cats">
You can't see mah catz!
</Lever>
{/* This will render as cats & koalas are disabled (all features have to be disabled) */}
<Lever disabled feature={['cats', 'koalas']}>
You can't see mah catz or koalaz!
</Lever>
{/* This will render as cats is disabled (at least one feature has to be disabled) */}
<Lever either disabled feature={['dogs', 'cats']}>
I may have a dog and I may have a cat
</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 },
koalas: { enabled: false },
};
ReactDOM.render(
<LeverProvider isDev={process.env.APP_ENV === 'development'} features={features}>
<AnimalPhotos />
</LeverProvider>,
document.querySelector('#root')
);React Lever also supports React Hooks
import { useLever } from 'react-lever';
function AnimalPhotos() {
const isDogPhotosEnabled = useLever('dogs');
const isCatPhotosEnabled = useLever('cats');
const isDogAndCatPhotosEnabled = useLever(['cats', 'dogs']);
const isDogOrCatPhotosEnabled = useLever(['cats', 'dogs'], { either: true });
const isCatPhotosDisabled = useLever('cats', { disabled: true });
const isCatAndKoalaPhotosDisabled = useLever(['cats', 'koalas'], { disabled: true });
const isCatOrDogPhotosDisabled = useLever(['cats', 'koalas'], { disabled: true, 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>
)}
{isCatPhotosDisabled && `You can't see mah catz!`}
{isCatAndKoalaPhotosDisabled && `You can't see mah catz or koalaz!`}
{isCatOrDogPhotosDisabled && `I may not have a dog and/or I may not have a cat`}
{isParrotPhotosEnabled && <ParrotPhotos />}
</Fragment>
)
}
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.
{ [feature]: { enabled: boolean, devOnly: boolean } }| Required
The global features of the application.
string | Array<string>| Required
The key (or name) of the feature.
boolean| Default:false
If the feature prop is an array & either of the features are enabled, then render the children.
boolean| Default:false
If the feature is disabled, then the feature will render.
boolean| Optional
If true, then the feature will render. This prop overrides the enabled flag in the <LeverProvider>'s features.
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.
string| Required
The key (or name) of the feature.
Object{ disabled, forceEnabled, either, devOnly }| Optional