Handling release management with React
Tags: webdev, react, javascript, testing
Published: 2020-05-12 15:47:02

---
title: Handling release management with React
published: true
description: Continuous release and continuous deployment provide developers with rapid feedback about their code. This requires the integration of their code changes as early as possible.
cover_image: https://i.imgur.com/K5eFNW5.png
tags: webdev, react, javascript, testing
---

Continuous release and continuous deployment provide developers with rapid feedback about their code. This requires the integration of their code changes as early as possible. Feature branches introduce a bypass to this process. Feature Flags are an important technique used for the implementation of continuous delivery.

Feature Flags allows developers to release a version of a product that has unfinished features. These unfinished features are hidden so they do not appear in the user interface.

### [What is UpStamps?](https://www.upstamps.com)

[UpStamps](https://www.upstamps.com) is a Feature Flag Management Platform to separate code from different environments and projects. 

UpStamps helps teams manage their projects using feature management with a **Central control** to progressively deliver features to users with confidence.

[Sign Up for Free](https://app.upstamps.com)

🛳 Ship when you're ready 
🚀 Accelerate feature release 
🙈 Hide unfinished features

Useful links about UpStamps:

- [About](https://www.upstamps.com)
- [Documentation](https://docs.upstamps.com)
- [Start Testing in Production](https://app.upstamps.com)


### React Integration

Integration with React helps and facilitates the process of testing and developing features in production and other environments. This integration consists of a set of plug-and-play components to accelerate the development process in your project.

> This section walks you through installing and configuring UpStamps in your application in a React Project.

Start by installing the library following the instructions below.

#### **Installation**

First, let's install some packages!

```bash
npm install --save upstamps-react
```

or with yarn

```bash
yarn add upstamps-react
```

### **Create a client provider**


With all the dependencies installed, let's create your UpStamps Client.

In our `index.js` file, let's import `UpStampsProvider` from `upstamps-react` and add the configuration params based on your UpStamps project. This params values can be found on the [UpStamps Dashboard in your project's settings](https://app.upstamps.com)

```js
import { UpStampsProvider } from "upstamps-react";

<UpStampsProvider clientId="xxx-xxx-xxx" projectKey="xxxxx" envKey="xxxxx">
  <div>
    <YourApp />
  </div>
</UpStampsProvider>;
```

That's it! Now your app is ready to start using feature flags and other features. Let's start using by importing some pre-built components inside of `upstamps-react`.


### **Create your first Feature Flag**


Feature flags are an excellent way to test features in production. Take advantage of different environments to hide or show your features. This can be used to facilitate the development process on project features that are not yet ready to be presented in production or even disable in real-time if any of the features in production are malfunctioning

### **useFlag Hook**

The library support React hooks. Use `useFlag` for a programmatical method. There's no limit to `useFlag`, just change the names. See the examples.

```js
import { useFlag } from "upstamps-react";

...

const AppComponent = () => {
  const { show } = useFlag("private_msg_2");
 const privateChat = useFlag("private_chat");

  return (
    <div>
      {show && <div>This is a great feature</div>}
     {privateChat.show && <div>This is a great private chat</div>}
    </div>
  );
};
```

### **Flag Component**

The pre-built component `Flag` accepts a component child or children, this component inside the `<Flag>` wrapper only showed when the flag exists in your [UpStamps Project](https://app.upstamps.com).

Notice: The behavior of the flag can be based on the project or the environments.

```js
import { Flag } from "upstamps-react";

...

<Flag name="private_msg_2">
  <YourFeature/>
</Flag>
```

### Conclusion

UpStamps offers a simple interface for creating flags with support for different plug-a-play SDKs for your projects.

Explore more feature in the [React Integrations Docs](https://docs.upstamps.com/src-react-integration)