NerdfishUI

Flags

Feature flags for React made easy with hooks and/or Render Props

View on GitHub

Features

  • Hooks API
  • Render Props API
  • Nested Flags

Import the FlagsProvider in your code and wrap your application around it.

import { createRoot } from 'react-dom/client'
import { FlagsProvider } from '@nerdfish/ui'


import { App } from './components/app'


createRoot(document.getElementById('root')!).render(
	<FlagsProvider features={{ niceFeature: true }}>
		<App />
	</FlagsProvider>,
)

Now use useFeature, Feature to check if the feature is enabled in your application:

Features Valid Values

Using an Array

createRoot(document.getElementById('root')!).render(
	<FlagsProvider features={['niceFeature', 'anotherFeature']}>
		<App />
	</FlagsProvider>,
)

Using an Object

createRoot(document.getElementById('root')!).render(
	<FlagsProvider features={{ niceFeature: true, anotherFeature: false }}>
		<App />
	</FlagsProvider>,
)

Using Nested Objects

createRoot(document.getElementById('root')!).render(
	<FlagsProvider
		features={{
			niceFeature: true,
			content: { anotherFeature: true, admin: false },
		}}
	>
		<App />
	</FlagsProvider>,
)

If you use nested objects you will need to either use the useFeatures hook or pass a string separated by /, e.g. content/anotherFeature to read nested flags, if you don't pass the whole path you will get an object so content will return { anotherFeature: false } when reading it.

useFeature Custom Hook

The useFeature custom hook is the base for the Render Prop implementation, it lets you check if a single feature is enabled and get a boolean, then you can do anything you want with that value, uesful to use it in combination with other hooks like useEffect or to show two different UIs based on a feature being enabled or not.

import { useFeature } from '@nerdfish/ui'


export function Header() {
	const hasNiceFeature = useFeature('niceFeature')


	return (
		<header>
			{hasNiceFeature ? <h1>My App niceFeature</h1> : <h1>My App v1</h1>}
		</header>
	)
}

Feature Render Prop

The Feature component works using the render prop pattern and as a wrapper. This component is useful if you want to hide an specific part of a component behind a feature flag but don't want to wrap the whole component.

Pass the name of the feature you want to check for and a children value and it will not render the children if the feature is enabled.

import { Feature } from '@nerdfish/ui'


export function Header() {
	return (
		<header>
			<Feature name="niceFeature">
				<h1>My App niceFeature</h1>
			</Feature>
		</header>
	)
}

Another option is to pass a function as children and get a boolean if the feature is enabled, this way you can render two different pieces of UI based on the feature being enabled or not.

import { Feature } from '@nerdfish/ui'


export function Header() {
	return (
		<header>
			<Feature name="niceFeature">
				{(isEnabled) =>
					isEnabled ? <h1>My App niceFeature</h1> : <h1>My App v1</h1>
				}
			</Feature>
		</header>
	)
}

In both cases you could also send a render prop instead of children.

import { Feature } from '@nerdfish/ui'


export function Header() {
	return (
		<header>
			<Feature name="niceFeature" render={<h1>My App niceFeature</h1>} />
		</header>
	)
}
import { Feature } from '@nerdfish/ui'


export function Header() {
	return (
		<header>
			<Feature
				name="niceFeature"
				render={(isEnabled) =>
					isEnabled ? <h1>My App niceFeature</h1> : <h1>My App v1</h1>
				}
			/>
		</header>
	)
}

useFeatures Custom Hook

The useFeatures custom hook is the base for the useFeature custom hook, it gives you the entire feature flags object or array you sent to FlagsProvider so you could use it however you want.

import { useFeatures } from '@nerdfish/ui'


export function Header() {
	let features = useFeatures()


	return (
		<header>
			{features.niceFeature ? <h1>My App niceFeature</h1> : <h1>My App v1</h1>}
		</header>
	)
}