Feature flag React

Helpers and wrappers for using Feature flags in React

App

useFeature

Custom hook for accessing and manipulating feature flags.

const Component = () => {
  const { feature, toggleFeature } = useFeature('my-feature');
  return (
    <>
      <p>My feature is { feature.enabled ? 'enabled': 'disabled' }</p>
      <button onClick={ () => toggleFeature() }>
        { feature.enabled ? 'disable' : 'enable' } my feature 
      </button>
    </>
  )
}

Note

this hook can access parent feature if not found in application

Framework

useCurrentAppFeatures

Custom hook for accessing all feature flags for an application

const Component =  () => {
  const appFeatures = useCurrentAppFeatures();
  if( appFeatures.features === undefined ){
      return <p>The current app does not have features enabled</p>
  }
  return (
    <>
      { 
        appFeatures.features.map(feature => (
          <button
            key={feature.key}
            disabled={ appFeatures.readOnly }
            onClick={ () => appFeatures.toggleFeature( feature.key ) }
          >
            { feature.enabled ? 'disable' : 'enable' } feature { feature.title }
          </button>
        )) 
      
      }
    </>
  )
}

useFrameworkFeature

Custom hook for using a framework feature

useFrameworkFeatures

Custom hook for using all framework features

useFeature

internal hook for getting a feature from a feature flag module

useFeatures

internal hook for getting features of a feature flag module