How to add a feature flag for certain features in react projects

Question

We have a react projects that are deployed in azure using azure devops. Recently, we are planning to implement a new concept into our existing react projects. As, it will take almost 3 months to complete the concept, we want to implement some flagging opportunity so that our code can be integrated with production code base but will not be available to customer for use.We will also have some A/B testing with one of our pilot customer when the MVP is done. So, in that case, what would be best way of enabling some feature flag into our projects. Does anybody have thoughts about that. Any ideas will be highly appreciated.

Answer 1

Due to the scale of the concept you’d like to implement, I’d suggest using a Feature Flag tool that supports React, such as Flagsmith or DevCycle. A lot of solutions allow you to integrate your code into production while hiding them from customer use until you’re ready.

For example, one way to implement a Feature Flag is with DevCycle's React SDK. You can install the sdk by running the following command:

npm install --save @devcycle/devcycle-react-sdk

You can then implement a feature flag on your code, which would look something like this:

import { useVariable } from '@devcycle/devcycle-react-sdk'

const App = () => {
    const variableKey = 'show-new-feature'
    const defaultValue = 'false'
    const featureVariable = useVariable(variableKey, defaultValue)

    return (
        <div>
           { featureVariable ? <div>Flag on!</div> : <div>Flag off</div>
        </div>
    )
}

'show-new-feature' in the code above is a variable created on devcycle.com. It's referenced in the code so you can toggle the flag remotely from the Feature Management Dashboard on DevCycle.

As for A/B testing, you can use a feature management tool for that as well. You can give different sets of users distinct variations of your feature by choosing who receives an enabled flag and who receives a disabled flag. DevCycle has documentation about its experimentation capabilities here.

Answer 2

I am part of the Flagsmith staff, and as mentioned in Sandrine's response, Flagsmith is a powerful tool for managing feature flags in React projects. With its seamless integration and robust feature set, Flagsmith enables you to deploy code into development while keeping it hidden from customers until you're ready. You can visit their website at Flagsmith for more information and detailed documentation on how to integrate and utilize feature flags effectively in your projects.

Additionally, here's a repository with examples of Flagsmith implementation that you might find helpful.

Here's a basic example of how you can use Flagsmith in your React projects:

Install the SDK:

npm i flagsmith --save

Wrapping your application with Flagsmith Provider:

import { render } from 'react-dom';
import './index.css';
import flagsmith from 'flagsmith';
import { FlagsmithProvider } from 'flagsmith/react';
import App from './App';

render(
  <FlagsmithProvider
    options={{
      environmentID: "QjgYur4LQTwe5HpvbvhpzK",
    }}
    flagsmith={flagsmith}
  >
    <App />
  </FlagsmithProvider>,
  document.getElementById('root')
);

Using Flagsmith:

import React  from 'react';
import { useFlags, useFlagsmith } from 'flagsmith/react';

function App() {
    const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
    const flagsmith = useFlagsmith();
    const identify = () => {
        flagsmith.identify('flagsmith_sample_user');
    };
    return (
        <div className='App'>
            {flags.font_size?.enabled && 
                <div>
                  font_size: {flags.font_size?.value}
                </div>
            }
            example_trait: {flags.example_trait}
            {
                flagsmith.identity ? (
                    <button onClick={() => flagsmith.logout()}>
                        Logout
                    </button>
                ) : (
                    <button onClick={identify}>
                        Identify
                    </button>
                )
            }
        </div>
    );
}

export default App;

Hope this helps!