Adding Feature Flags to your React app (with examples)

Reflag is a TypeScript feature flagging tool with SDKs for React, Vue, Next, Node, and others. Feature flags help you to release features or to conditionally show content in your React apps.

In this article, we’ll walk through creating a React app, adding Reflag, creating a feature flag, and then implementing the flag to toggle a feature in your app using the React.js SDK.

Get started

Sign up for Reflag or start from the CLI:

npx @reflag/cli new

Then install the React SDK via npm:

npm i @reflag/react-sdk

1. Add the ReflagProvider context provider

Start by adding the ReflagProvider context provider to your application. The ReflagProvider initializes the Reflag SDK, fetches flags and starts listening for automated feedback events.

The component can be configured using a number of props, including your publishableKey, which is used to connect the provider to an environment on Reflag. You can create a publishableKey from your environment settings in Reflag.

In the example below, we also set the context. This is an object containing user, company, and other properties that make up the evaluation context. It’s used to determine if a flag is enabled or not. company and user contexts are automatically transmitted to Reflag servers so the Reflag app can show you which companies have access to which flags, etc.

Example:

import { ReflagProvider } from "@reflag/react-sdk";

<ReflagProvider
  publishableKey="{YOUR_PUBLISHABLE_KEY}"
  context={{
    company: { id: "acme_inc", plan: "pro" },
    user: { id: "john doe" },
  }}
  loadingComponent={<Loading />}
>
  {/* children here are shown when loading finishes or immediately if no `loadingComponent` is given */}
</ReflagProvider>;

2. Create a new flag and set up type safety

Reflag offers type safety, which makes sure that flag key typos become build errors. This means that if you accidentally use a non-existent flag key, you'll receive a type error instead of it making it into prod and causing runtime errors.

You can use the Reflag CLI to generate flag types from their definition in Reflag. Once flag types have been generated they are automatically picked up by TypeScript. To do this, run npx reflag new to create your flag. On the first run, it will sign into Reflag and set up type generation for your project, like so:

❯ npx reflag new
Opened web browser to facilitate login: https://app.reflag.com/api/oauth/cli/authorize

Welcome to ◪ Reflag!

? Where should we generate the types? gen/flags.d.ts
? What is the output format? react
✔ Configuration created at reflag.config.json.

Creating flag for app Slick app.
? New flag name: Huddle
? New flag key: huddle
✔ Created flag Huddle with key huddle (https://app.reflag.com/features/huddles)
✔ Generated react types in gen/flags.d.ts.

3. Use useFlag(<flagKey>) to get flag status

We’ll now add the useFlag hook to get flag status. useFlag is the main hook in Reflag and returns the state of a given flag for the current context, and provides type-safe access to flags and their configurations.

Here we’ll set up the useFlag hook from your components to toggle flags on/off and track flag usage. It’s worth noting that useFlag can help you do much more, including getting feedback from users, which is all tied back to the flag you’re using.

Example:

function StartHuddleButton() {
  const {
    isEnabled, // boolean indicating if the flag is enabled
    track, // track usage of the flag
  } = useFlag("huddle");

  if (!isEnabled) {
    return null;
  }

  return <button onClick={track}>Start huddle!</button>;
}

And that’s it, you now have a working feature flag added to your React app. It’s a basic implementation, but from here you can also look into tracking usage of your feature, and getting feedback.

Something you’ll notice when you load your app is the Reflag Toolbar. It’s a great way to toggle flags on/off for yourself to ensure that everything works. The toolbar automatically appears on localhost. However, it’s also useful in production, too. You have full control over when it appears through the toolbar configuration option passed to the ReflagProvider.

One last thing, if you want to dynamically change behavior in your app without redeploying, then take a look at remote config, too.