Setting Up FeaturesFlow in React

This guide will assist you in preparing your React environment to incorporate feature flags using FeaturesFlow.

Step 1: Create React Application

To start, create a new React application with the following command:

npx create-react-app my-app

This command sets up a new project named my-app. Navigate into your project directory:

cd my-app

Step 2: Install FeaturesFlow SDK

To install the FeaturesFlow SDK, run the following command:

npm install @featuresflow/sdk-react

or

yarn add @featuresflow/sdk-react

Step 3: Initialize the SDK

To initialize the SDK, you can use the FeaturesFlowProvider component. This component takes a config object as a prop, which should contain an authenticationKey and a sessionId.

import { FeaturesFlowProvider } from '@featuresflow/sdk-react'
 
const App = () => {
  const config = {
    authenticationKey: 'your_auth_key',
    identifier: 'your_identifier'
  }
 
  return <FeaturesFlowProvider config={config}>{/* Your application components */}</FeaturesFlowProvider>
}
 
export default App

Step 4: Select a feature toggle

1. Go to your organization's dashboard and select the project you want to work on.

2. Click on the feature toggle you want to use.

   

Step 5: Define targeting rules (optional)

Let's apply some targeting rules for this example. Check Feature Toggles for all available settings

We have set up the targeting rules in a way that if we pass the countryCode as US, the feature toggle will be enabled.

Press 'Apply changes' to save the settings.

Step 6: Edit config

Add countryCode prop to config. By adding it, you can target users based on their country code. Check React SDK for all config options.

const config = {
  authenticationKey: 'your_authentication_key',
  identifier: 'your_identifier',
  properties: {
    countryCode: 'US',
  },
}

Step 7: Get feature toggle value with useFeatureToggle hook.

test-flag is our feature toggle key that we chose in step 4.

import { useFeatureToggle } from '@featuresflow/sdk-react'
 
type FeatureToggleTreatment = 'on' | 'off' | 'control'
 
const MyComponent = () => {
  const treatment: FeatureToggleTreatment = useFeatureToggle('test-flag')
 
  return <div>{treatment === 'on' ? <VersionOn /> : <VersionOff />}</div>
}

Step 8: Done! That’s how little it takes to setup FeaturesFlow in react.