React FeatureFlag Hooks and wrapper

Hooks

  • useFlagHook
  • useGaurdHook
  • usage useGaurdHook(‘awesome-button’) | return boolean

update feature flags on the fly

  • The useFlagHook give updateContext method

callback after each update

  • the updateContext accepts callback as second parameter
  • this callback gets newFeatureFlags and new role as parameters

Wrapper component with support of fallback component

  • Renders children only if flag prop is true for current role
  • If fallback prop is provided and flag prop is false for current role, renders fallback

Demo

See Demo on Sandbox

App.js

import { FeatureFlagProvider } from 'featureflag-hooks';
import Home from './Pages/Home';

const flagList = {
  admin:{
      awesomebutton:true,
      message:false
  },
  user:{
      awesomebutton:false,
      message:true
  }
}

function App() {
  return (
    <FeatureFlagProvider initialRoleName='admin' featureFlagsDictionary={flagList} >
      <Home/>
    </FeatureFlagProvider>
  );
}

export default App;

Home.js

  • using the Gaurd wrapper

import React from 'react'
import { Gaurd } from 'featureflag-hooks'
import AwesomeButton from './AwesomeButton'
import SecretMessage from './SecretMessage'
import ToggleFlags from './ToggleFlags'
const fallback = <h1>Opps you don't have the permissions</h1>
const Home = () => {
    return (
        <div>
             /** With &lt;Gaurd /&gt; Wrapper */
            <Gaurd fallback={fallback} flag='awesomebutton'>
                <AwesomeButton/>
            </Gaurd>
            <hr/>
            /** With useGuardHook */
            <SecretMessage/>
            <hr/>
            <ToggleFlags/>
        </div>
    )
}

export default Home

SecretMessage.jsx

  • using the useGaurdHook

import React from 'react'
import { useGuardHook } from 'featureflag-hooks'

const SecretMessage = () => {
    const hasPermission = useGuardHook('message')
    return (
        hasPermission ?<h1>Secret message for user</h1>:null
    )
}

export default SecretMessage

ToggleFlags.jsx

  • using the updateContext method via useFlagHook

import React from 'react'
import { useFlagHook } from 'featureflag-hooks'

const ToggleFlags = () => {
    const {  role, updateContext } = useFlagHook()
    const nextRole = role==='admin'?'user':'admin'
    const callBack = (newFeatureFlags,role)=>{
        console.log('@callBack: newFeatureFlags',newFeatureFlags,'role',role)
    }
    const handleToggle =()=> {
        updateContext(nextRole,callBack)
    }
    return (
        <button onClick={handleToggle}>Switch to {nextRole} permissions</button>
    )
}

export default ToggleFlags

Output

Output with console logs

GitHub

https://github.com/Badalmishra/React-FeatureFlag-hooks