Handling release management with React

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?

UpStamps 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

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

Useful links about UpStamps:

• About
• Documentation
• Start Testing in Production

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!

npm install --save upstamps-react

or with yarn

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

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.

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.

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

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