How to use Feature Flags with React

February 26, 2020

Feature flagging (sometimes called feature toggling) is a technique that enables toggling the features of the application on or off. It gives teams the ability to work on the feature while it’s safely hidden from the users behind the feature flag. Feature flags are a key part of continuous integration where new features are frequently being deployed, but not necessarily released to users. They can be also used for A/B testing by releasing the features only to a certain group of users, a specific region or country for example.

Feature flags can be used in React in a couple of ways, but we will use the react-feature-flags library. This library is not very popular on npm, but I found it to be reliable and easy to use.

Flags

We will need a set of flags for our app. Flags are basically an array of objects that contain two properties: the name of the flag, and boolean isActive property.

flags = [
  {
    name: "developmentOnly",
    isActive: "true",
  },
]

Flags provider

In order to make flags available throughout the app, it is necessary to use FlagsProvider. Flags provider is using a React context to pass the flags as a value prop. Here’s how to use it in the App component:

import { FlagsProvider } from "react-feature-flags"
return (
  <FlagsProvider value={flags}>
    <App />
  </FlagsProvider>
)

Using the flags

By wrapping up the parts of the code in the Flags component, we can control whether it will be rendered or not. The Flags component receives the array of authorized flags. If one or more flags in the array are active (isActive === true), the children of Flags component will be rendered:

import { Flags } from "react-feature-flags"
return (
  <Flags authorizedFlags={["developmentOnly"]}>
    <h1>
      This title will be visible only when developmentOnly flag has isActive
      prop set to true.
    </h1>
  </Flags>
)

Setting the flags active depending on the environment

In the previous example, we hardcoded developmentOnly flag to be true. It would be much better if we could show some features only in certain environments, like during the development. Turns out it’s not that hard. If you are using React, then the environment variables are embedded during the build time. We can find out if we are in the development environment and set up flags accordingly by using built-in NODE_ENV environment variable:

flags = [
  {
    name: "developmentOnly",
    isActive: process.env.NODE_ENV === "development",
  },
]

Our developmentOnly flag will be true only in development mode and we can be sure that any code wrapped in it won’t affect the users.