Table of Contents

Installation

npm install react-lever --save

yarn add react-lever

Usage

Using Components

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'));

Using 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>)}

<LeverProvider> props

isDev

features

<Lever> props

feature

either

disabled

forceEnabled

devOnly

useLever(feature[, options])

feature

options

License