import{FeatureFlagProvider}from'featureflag-hooks';importHomefrom'./Pages/Home';constflagList={_common:{story:true,awesomebutton:true,message:true},admin:{message:false/** Message will not be shown to admin*/},user:{awesomebutton:false/** AwesomeButton will not be shown to users*/}}functionApp(){return(<FeatureFlagProviderinitialRoleName='admin'featureFlagsDictionary={flagList}><Home/></FeatureFlagProvider>);}exportdefaultApp;
Home.js
using the Gaurd wrapper
importReactfrom"react";import{Gaurd}from'featureflag-hooks';importAwesomeButtonfrom"./AwesomeButton";importSecretMessagefrom"./SecretMessage";importToggleFlagsfrom"./ToggleFlags";import{Fallback}from"./Fallback";importStroryfrom"./Strory";constHome=()=>{conststyle={padding:'1rem',border:'1px dashed grey',borderRadius:'8px',background:'wheat'}return(<div><ToggleFlags/><hr/><divstyle={{display: "flex",justifyContent: "space-around"}}><divstyle={style}><code>1. With <Gaurd /> Wrapper, only visible for admin role </code><Gaurdfallback={<Fallback/>}flag="awesomebutton"><AwesomeButton/></Gaurd></div><divstyle={style}><code>2. With useGuardHook, only visible for user role</code><SecretMessage/></div><divstyle={style}><code>3. Common flag, visible for every role</code><Gaurdfallback={<Fallback/>}flag="story"><Strory/></Gaurd></div></div></div>);};exportdefaultHome;
SecretMessage.jsx
using the useGaurdHook
import{useGuardHook}from'featureflag-hooks'import{Fallback}from'./Fallback'constSecretMessage=()=>{consthasPermission=useGuardHook('message')return(hasPermission ?<h3>This is a secret message for user role</h3>:<Fallback/>)}exportdefaultSecretMessage
ToggleFlags.jsx
using the updateContext method via useFlagHook
importReactfrom'react'import{useFlagHook}from'featureflag-hooks'constToggleFlags=()=>{const{ role, updateContext }=useFlagHook()constnextRole=role==='admin'?'user':'admin'constcallBack=(newFeatureFlags,role)=>{console.log('@callBack: newFeatureFlags',newFeatureFlags,'role',role)}consthandleToggle=()=>{updateContext(nextRole,callBack)}return(<buttononClick={handleToggle}>Switch to {nextRole} permissions</button>)}exportdefaultToggleFlags