Powerful feature flags in React

Setup the Feature Flag Interface

Create a free Optimizely Rollouts account here.

In the Rollouts interface, navigate to ‘Features > Create New Feature’ and create a feature flag called ‘hello_world’.

To connect your ‘hello_world’ feature to your application, find your SDK Key. Navigate to ‘Settings > Datafile’ and copy the SDK Key value.

Install the Optimizely Rollouts React SDK

The React SDK allows you to setup feature toggles from within your codebase using JavaScript.

Using npm:

>npm install --save @optimizely/react-sdk

or using yarn:

>yarn add @optimizely/react-sdk

Use the SDK by wrapping your main React App component in the OptimizelyProvider component and replace <Your_SDK_Key> with the SDK key you found above.

import React from 'react'; import { createInstance, OptimizelyProvider, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '<Your_SDK_Key>', }) class App extends React.Component { render() { return ( <OptimizelyProvider optimizely={optimizely} user={{ id: 'user123', attributes: { 'customerId': 123, 'isVip': true, } }}> <h1>Example Application</h1> <div> No features here yet... </div> </OptimizelyProvider> ) } } export default App;Note that the OptimizelyProvider takes a user object that defines properties associated with a visitor to your website.

• user.id: is used for a random percentage rollout across your users
• user.attributes: are used for a targeted rollout across your users. You will use these attributes to target your feature to specific groups of users starting in step 5.

Implement the Feature

To implement your ‘hello_world’ feature, first import the OptimizelyFeature component at the top of your application:

class="">import { OptimizelyFeature } from '@optimizely/react-sdk'

Then put the OptimizelyFeature component in the app, passing your feature key ‘hello_world’ to the feature prop of the OptimizelyFeature component:

<OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (<p> You got the <strong>hello_world</strong> feature! </p>) : (<p> You did not get the feature </p>) )} </OptimizelyFeature>

The feature prop connects the component to the feature you created in the Optimizely UI in the first step.

Your full code sample now looks like the following:

import React from 'react'; import { createInstance, OptimizelyProvider, OptimizelyFeature, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '<Your_SDK_Key>', }) class App extends React.Component { render() { return ( <OptimizelyProvider optimizely={optimizely} user={{ id: 'user123', attributes: { 'customerId': 123, 'isVip': true, } }}> <h1>Example Application</h1> <div> <OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (<p> You got the <strong>hello_world</strong> feature! </p>) : (<p> You did not get the feature </p>) )} </OptimizelyFeature> </div> </OptimizelyProvider> ) } } export default App;

Turn the Feature Toggle on!

If you run your application now, you’ll notice that you did not get the feature. This is because the feature is not enabled, which means it’s off for all visitors to your application.

To turn on the feature:

1. Navigate to Features
2. Click on the ‘hello_world’ feature
3. Toggle the feature on and ensure it is set to 100% (see screenshot below)
4. Click Save to save your changes

In around 1 min, refreshing your React app should now show the feature toggled on and you should see “You got the hello_world feature!!”.

You have now successfully launched your feature behind a feature flag, but it’s available to everyone. The next step is to enable targeting to show your feature only to a specific subset of users to enable the true value of rolling a feature out customer-by-customer.

Create an attribute for customerId

To target your feature based on the userAttributes you provided to the OptimizelyProvider component in step 2, you’ll have to create those userAttributes in the Rollouts UI. Do that with the attribute ‘customerId’ to start:

1. Navigate to Audiences -> Attributes
2. Click ‘Create New Attribute…’
3. Name the attribute key ‘customerId’
4. Click ‘Save Attribute’ to save your changes

Create and add a beta audience

Now let’s create an audience to indicate which customerIds will get access to your feature.

1. Navigate to Features
2. Click on your ‘hello_world’ feature
3. Scroll down to Audiences
4. Click ‘Create New Audience…’
5. Name the Audience ‘[hello_world] Beta Users’
6. Drag and Drop your customerId attribute into the Audience conditions
7. Change the ‘has any value’ drop-down to “Number equals” with the value 123
8. Click ‘Save Audience’

Add the audience to your feature by clicking the + button next to your newly created Audience. Then scroll down and click ‘save’.

Now that you’ve added the audience to your feature, the beta is up and running. At this point your feature is only showing for customers with the customerId 123, which is what you provided to the OptimizelyProvider component in the userAttributes prop.

As a test to verify, you can change your customerId to 456, save, and watch as the feature will get turned off because you don’t meet the targeting conditions.

Add users to the beta

To add more customers into your beta audience, edit the audience definition to add or remove users from the beta:

• Click on the “+” sign and save to add beta users
• Click on the “x” sign and save to remove beta users

In the following screenshot example, three customers have been added to the beta. Customers with ids: 123, 456, and 789, will now have access to the ‘hello_world’ feature.

Launch the feature

After enabling your feature for enough customers to enjoy the new user experience, you may decide that it’s safe to launch your feature to all customers.

Once you are ready to launch your feature out of beta, follow these steps:

1. Remove the audience from your feature
2. Ensure the rollout is configured to 100%
3. Save the feature

The feature is now available to everyone and you have successfully rolled out the ‘hello_world’ feature customer-by-customer using free feature flags from Optimizely Rollouts in React!