docs: How to Implement Feature Flags in React using Unleash

[rishi-raj-jain]

Outline 👇🏻

---

How to Implement Feature Flags in React using Unleash

Some additional information

In this tutorial, you will learn how to use feature flags in a [React](https://reactjs.org/) application that shows different content based on the current time and set the time new content shall be shown, using Unleash. We will use the @unleash/proxy-client-react and unleash-proxy-client packages, which provides easy integration of Unleash feature flags in a React application.

What we’ll be using

Mention:

• Tech (It's purpose)
• Tech (It's purpose)
• Tech (It's purpose)

What you’ll need

• Tech (It's purpose)
• Tech (It's purpose)

Setting up the project

To set up, just clone the app repo and follow this tutorial to learn everything that's in it. To fork the project, run:

git clone https://github.com/rishi-raj-jain/repo-slug
# Some additional information

Scaffolding a React app

Creating an React app is as easy as a single command:

# command

Setup Unleash

1. Run the following commands in the terminal to fetch the docker-compose.yml for creating an Unleash instance:

wget getunleash.io/docker-compose.yml
docker-compose up -d

This will start Unleash in the background. Once Unleash is running, you can access it at http://localhost:4242/.

1. Now use the default credentials to log into the instance:

Username: admin
Password: unleash4all

Exploring Unleash's currentTime strategy constraint

To display different contents based on the time it's being accessed, we'll be use an existing strategy constraint named currentTime in Unleash. This will help us decide whether the new content shall be shown, and use that flag in our app.

Screenshots

Create a New Feature

Create a new feature flag in your Unleash instance named timebased-content.

Steps to use the exisiting constraint currentTime

Screenshots

Integrating Unleash in React app

Installation

To get started with React and Unleash, you need to install @unleash/proxy-client-react and unleash-proxy-client packages as dependencies.

You can run the following commands in your terminal to do this:

npm install @unleash/proxy-client-react unleash-proxy-client

Set up Environment Variables

By default, the following values are setup in your local Unleash instance

# .env

UNLEASH_API_URL="http://localhost:4242/api"
UNLEASH_AUTHORIZATION_KEY="default:development.unleash-insecure-api-token"

Initialise Unleash SDK

Some additional information

// some code

Use Unleash SDK to fetch the feature flag value

Some additional information

// some code

Scenarios

Some additional information

Screenshots

Revert: Scenarios

Some additional information

Screenshots

Using Unleash in Production

To setup Unleash for production, please follow the steps below:

1. Self-host Unleash, or run an instance on [Unleash Cloud](https://www.getunleash.io/pricing).
2. Get an [API key](/reference/api-tokens-and-client-keys) from the Unleash dashboard.
3. Store the API key in your Environment Variables of your hosting, which secures it and makes it accessible in your code.

Conclusion

Some additional information

[rishi-raj-jain]

Timed Based Content demo with Unleash and React

React.Timed.Content.Unleash.mp4

[ivarconr]

we have a guide for react written by @nnennandukwe here: https://docs.getunleash.io/feature-flag-tutorials/react