# Adding Feature Flags to your React app (with examples)

Gareth

Reflag is a [TypeScript feature flagging tool](https://reflag.com/blog/best-feature-flags-typescript) 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](https://docs.reflag.com/supported-languages/react-sdk).

## Get started

Start from the CLI:

```bash
npx @reflag/cli new
```

Then install the React SDK via npm:

```bash
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](https://app.reflag.com/env-current/settings/app-environments) 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:**

```javascript
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](https://docs.reflag.com/product-handbook/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:

```bash
❯ 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](https://docs.reflag.com/supported-languages/react-sdk#usetrack) flag usage. It’s worth noting that `useFlag` can help you do much more, including getting [feedback](https://docs.reflag.com/supported-languages/react-sdk#userequestfeedback) from users, which is all tied back to the flag you’re using.

**Example:**

```javascript
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](https://docs.reflag.com/supported-languages/react-sdk#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](https://docs.reflag.com/product-handbook/remote-config), too.