Skip to main content

ReactJS Client


Firstly, Get your Featureflow account at


Version ^2.x.x uses the new react context API and therefore requires react > 16.3 To use featureflow with versions of react below 16.3, please use the 1.x.x client.

When using the 1.x client you will need to also include the core javascript api:

$ npm install --save featureflow-client

Version 2.x.x includes the core javascript SDK so there is no need to install it in addition to react-featureflow-client.


Using NPM

$ npm install --save react-featureflow-client

Getting Started

Getting started is simple:

  1. Wrap your application with a featureflow provider - there should only be one provider - it should sit at your top level App component.

If you have

<App feature="example-feature"/>,

wrap App using withFeatureflowProvider:

import { withFeatureflowProvider, useFeatureflow, useFeatures } from 'react-featureflow-client'

const FF_KEY = 'js-env-YOUR_KEY_HERE';
const user = {
attributes: {
tier: 'gold',
country: 'australia',
roles: ['role1', 'role2']

export default (withFeatureflowProvider({
apiKey: FF_KEY,
config: {
streaming: true,
  1. You then have access to the featureflow client and evaluated features using hooks:
import { useFeatureflow, useFeatures } from 'react-featureflow-client'

const App: React.FC<Props> = () => {

const featureflow = useFeatureflow();
const features = useFeatures();
const feature = 'example-feature';

return <div>
<h1>A very simple example</h1>
{ featureflow.evaluate(feature).isOn() && [
<p key="1">I am on</p>,
{ featureflow.evaluate(feature).isOff() && [
<p key="1">I am off</p>,
{Object.keys(features).map(key => <div>{key} : {features[key]}</div>)}

If you want your component to wait until featureflow has received an initial response, set config.waitForInit = true in the featureflowConfig.

If you want to render a different component while waiting on response from featureflow, you can pass in config.preInitComponent = <YourComponent/>.

This is especially useful if you may have a race condition with your application on initial load of features.

const featureflowConfig = {
waitForInit: true,
preInitComponent: <YourComponent/>

export default withFeatureflow(featureflowConfig)(MyComponent);


react-featureflow-client exposes 2 properties.

import {
} from 'react-featureflow-client';

<FeatureflowProvider client>

Connects your featureflow to your React application. Must only have one child.

client*featureflowRequiredAn instantiated featureflow client

withFeatureflow([mapFeatureListeners], [clientProp])(Component)

Pass the featureflow client to a React Component's props.

featureflowConfigobject{}Use to set the update property and featureflow clientName specifically for the component. See FeatureflowConfig.
ComponentComponentRequiredThe component to pass the featureflow client to.


updatebooleanfalseIf set to true then when features update from featureflow, the component will update automatically.
clientNamestring"featureflow"Use this to change the prop that the featureflow client will bind to.
waitForInitbooleanfalseUse this to wait for featureflow to respond with features before the rendering the component
preInitComponentReactComponentundefinedUse this display another component when the featureflow rules haven't loaded and waitForInit is true
import { withFeatureflow } from 'react-featureflow-client';

class MyComponent extends React.Component{
return (
{this.props.customFeatureflow.evaluate('example-feature').isOn() &&
This text will be shown if "example-feature" is "on".
It will be updated in realtime if "example-feature" changes it's value.

export default withFeatureflow({update: true, clientName: 'customFeatureflow'})(MyComponent);

For more, see the github repo Featureflow Javascript Client