docs: How to Implement Dependent Feature Flags in React using Unleash

[rishi-raj-jain]

Outline 👇🏻

---

How to Implement Dependent Feature Flags in React using Unleash

Some additional information

In this tutorial, you will learn how to use dependent feature flags in a React application that'll offer Unified Payments Interface (UPI) as the payment method only if Instant Payment is enabled in the first place for the user. We will use the @unleash/proxy-client-react package, 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 a 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 outside of your current project directory:

git clone git@github.com:Unleash/unleash.git
cd unleash
docker compose up -d

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

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

Username: admin
Password: unleash4all

Create a New Feature Flag

Create a new feature flag in your Unleash instance named instant-payments.

Steps to create a new feature flag, instant-payments

Screenshots

Create a Dependent Feature Flag

Create a new feature flag in your Unleash instance named upi.

Steps to create a dependent feature flag, upi

Screenshots

Integrating Unleash in a React app

Installation

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

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

npm install @unleash/proxy-client-react

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 dependent 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](https://github.com/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]

Requesting a review from @nnennandukwe & @nunogois.

[nnennandukwe]

Looks good so far! the dependent feature flag would have a unique name (different from the parent flag), correct?

[rishi-raj-jain]

the dependent feature flag would have a unique name (different from the parent flag), correct?

Yeah, totally. The name for that would be upi, I've updated the outline.

[kwasniew]

Two minor comments:

• "Using Unleash in Production" section doesn't seem to be related to the topic of Dependent Flags and more like a topic for a different piece of content.
• Headlines could have more consistent format. I like to use the first items on the list to establish a pattern. E.g. start all items with a verb or noun. More: https://developers.google.com/tech-writing/one/lists-and-tables

[rishi-raj-jain]

@nnennandukwe

May I have your confirmation to proceed on this? I'd love to get this done, pardon the absence.

[rishi-raj-jain]

"Using Unleash in Production" section doesn't seem to be related to the topic of Dependent Flags and more like a topic for a different piece of content.

Cool yeah, even in this case, it's going to be working directly in production and not a local setup.

[rishi-raj-jain]

Headlines could have more consistent format. I like to use the first items on the list to establish a pattern. E.g. start all items with a verb or noun. More: https://developers.google.com/tech-writing/one/lists-and-tables

Sure thing. Let me get this done once I have a confirmation to work on this.