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.