React Feature Flag

Version Documentation Maintenance License: MIT Twitter: fdaciuk

Type safe Components to create Feature Flags (or Feature Toggle) with React.js

yarn add @fdaciuk/react-ff

First of all, we have to create our componentes using createFeatureFlag function. Create a new file (e.g. src/feature-flag.tsx) with this content:

import { createFeatureFlag } from '@fdaciuk/react-ff'
export type Flags = 
 | 'NEW_HEADER'
 | 'NEW_FOOTER'
const { FF, FFProvider } = createFeatureFlag<Flags>()
export { FF, FFProvider }

Now, on top of your app, import FFProvider from src/feature-flag.tsx, and pass all the flags your app will use, following the shape:

const flags = {
 NEW_HEADER: true,
 NEW_FOOTER: false,
}

In the above example, the user has access to something that should be rendered by the flag NEW_HEADER, but not by the flag NEW_FOOTER.

Usage of FFProvider:

function App () {
 const flags = {
 NEW_HEADER: true,
 NEW_FOOTER: false,
 }
 return (
 <FFProvider flags={flags}>
 <TheRestOfMyApp />
 </FFProvider>
 )
}

Now, anywhere on your app, you can use the FF component to make the feature flag (or feature toggle):

function TheRestOfMyApp () {
 return (
 <>
 <FF flag='NEW_HEADER' feature={<NewHeader />}>
 <OldHeader />
 </FF>
 <FF flag='NEW_FOOTER' feature={<NewFooter />} />
 </>
 )
}
function NewHeader () {
 return (
 <header>New header</header>
 )
}
function OldHeader () {
 return (
 <header>Old header</header>
 )
}
function NewFooter () {
 return (
 <footer>New footer</footer>
 )
}

The flag prop is type safe, and will only accept flags from type Flags, passed for createFeatureFlag function.

The children is optional. You can pass a children when you want to render a fallback component, whether flag is disabled (false).

👤 Fernando Daciuk - @fdaciuk

• Website: https://daciuk.dev
• Twitter: @fdaciuk
• Github: @fdaciuk
• LinkedIn: @fdaciuk

Logo by @vmarcosp ♥️

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Give a ⭐️ if this project helped you!

Copyright © 2021 Fernando Daciuk - @fdaciuk.
This project is MIT licensed.