- Notifications
You must be signed in to change notification settings - Fork3
medipass/react-lever
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A library to conditionally render React components based on feature toggles.
npm install react-lever --saveor install withYarn if you prefer:
yarn add react-leverWrap your application in a<LeverProvider>, and your features in a<Lever> like so:
importReact,{Component,Fragment}from'react';importReactDOMfrom'react-dom';importLever,{LeverProvider}from'react-lever';functionAnimalPhotos(){return(<Fragment><h1>Photos of animals</h1>{/* This will render as enabled=true */}<Leverfeature="dogs"><DogPhotos/></Lever>{/* This will not render as enabled=false */}<Leverfeature="cats"><CatPhotos/></Lever>{/* This will not render as cats is disabled (all feature have to be enabled) */}<Leverfeature={['dogs','cats']}><DogPhotos/><CatPhotos/></Lever>{/* This will render as dogs is enabled (at least one feature has to be enabled) */}<Levereitherfeature={['dogs','cats']}><DogPhotos/><CatPhotos/></Lever>{/* This will render as enabled=false */}<Leverdisabledfeature="cats"> You can't see mah catz!</Lever>{/* This will render as cats & koalas are disabled (all features have to be disabled) */}<Leverdisabledfeature={['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) */}<Levereitherdisabledfeature={['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. */}<Leverfeature="parrots"><ParrotPhotos/></Lever></Fragment>)}constfeatures={dogs:{enabled:true},cats:{enabled:false},parrots:{enabled:true,devOnly:true},koalas:{enabled:false},};ReactDOM.render(<LeverProviderisDev={process.env.APP_ENV==='development'}features={features}><AnimalPhotos/></LeverProvider>,document.querySelector('#root'));
React Lever also supports React Hooks
import{useLever}from'react-lever';functionAnimalPhotos(){constisDogPhotosEnabled=useLever('dogs');constisCatPhotosEnabled=useLever('cats');constisDogAndCatPhotosEnabled=useLever(['cats','dogs']);constisDogOrCatPhotosEnabled=useLever(['cats','dogs'],{either:true});constisCatPhotosDisabled=useLever('cats',{disabled:true});constisCatAndKoalaPhotosDisabled=useLever(['cats','koalas'],{disabled:true});constisCatOrDogPhotosDisabled=useLever(['cats','koalas'],{disabled:true,either:true});constisParrotPhotosEnabled=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?
Iffalse, and a feature is flagged withenabled anddevOnly attributes astrue, 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 thefeature 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
Iftrue, then the feature will render. This prop overrides theenabled flag in the<LeverProvider>'s features.
boolean| Optional
Iftrue, then the feature is available to the development environment only (as specified in<LeverProvider>'sisDev prop). This prop overrides thedevOnly flag in the<LeverProvider>'s features.
string| Required
The key (or name) of the feature.
Object{ disabled, forceEnabled, either, devOnly }| Optional
About
A library to conditionally render React components based on feature toggles.