Flagged

Feature flags for React made easy with hooks, HOC and Render Props

Features

• Hooks API
• High Order Component API
• Render Props API
• TypeScript Support
• Zero Dependencies
• Nested Flags

How to Use It

Install it from npm.

1yarn add flagged
2# npm i flagged

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

1import { createRoot } from "react-dom/client";
2import { FlagsProvider } from "flagged";
3
4import { App } from "./components/app";
5
6createRoot(document.getElementById("root")!).render(
7	<FlagsProvider features={{ v2: true }}>
8		<App />
9	</FlagsProvider>,
10);

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

Features Valid Values

The features prop you pass to FlagsProvider could be an array of strings or an object, if you decide to use an object you could also pass nested objects to group feature flags together.

Using an Array

1createRoot(document.getElementById("root")!).render(
2	<FlagsProvider features={["v2", "moderate"]}>
3		<App />
4	</FlagsProvider>,
5);

Using an Object

1createRoot(document.getElementById("root")!).render(
2	<FlagsProvider features={{ v2: true, moderate: false }}>
3		<App />
4	</FlagsProvider>,
5);

Using Nested Objects

1createRoot(document.getElementById("root")!).render(
2	<FlagsProvider
3		features={{ v2: true, content: { moderate: true, admin: false } }}
4	>
5		<App />
6	</FlagsProvider>,
7);

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

useFeature Custom Hook

The useFeature custom hook is the base for the HOC and 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.

1import { useFeature } from "flagged";
2
3export function Header() {
4	const hasV2 = useFeature("v2");
5
6	return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>;
7}

withFeature High Order Component

This withFeature high order component let's you wrap a component behind a feature flag, this way the parent component using your wrapped component doesn't need to know anything about the feature flag. This is useful when you don't need to provide a fallback if the feature is disabled, e.g. for admin pieces of UI or new features you want to hide completely.

1import { withFeature } from "flagged";
2
3export const Heading = withFeature("newHeading")(function Heading() {
4	return <h1>My App v2</h1>;
5});

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.

1import { Feature } from "flagged";
2
3export function Header() {
4	return (
5		<header>
6			<Feature name="v2">
7				<h1>My App v2</h1>
8			</Feature>
9		</header>
10	);
11}

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.

1import { Feature } from "flagged";
2
3export function Header() {
4	return (
5		<header>
6			<Feature name="v2">
7				{(isEnabled) => (isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>)}
8			</Feature>
9		</header>
10	);
11}

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

1import { Feature } from "flagged";
2
3export function Header() {
4	return (
5		<header>
6			<Feature name="v2" render={<h1>My App v2</h1>} />
7		</header>
8	);
9}

1import { Feature } from "flagged";
2
3export function Header() {
4	return (
5		<header>
6			<Feature
7				name="v2"
8				render={(isEnabled) =>
9					isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>
10				}
11			/>
12		</header>
13	);
14}

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.

1import { useFeatures } from "flagged";
2
3export function Header() {
4	let features = useFeatures();
5
6	return (
7		<header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>
8	);
9}