react-featureflow-client

!npm-imgnpm-url
!dependency-imgdependency-url

Official React bindings for Featureflow Javascript Client

Get your Featureflow account at featureflow.io

Note

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.

Installation

Using NPM

$ npm install --save react-featureflow-client

Example

There is an example in this repository. Add your JS Client Environment SDK Key to example/src/index.tsx
``const FF_KEY = 'sdk-js-env-yourkeyhere';``
And

cd example
yarn start

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

ReactDOM.render(
    <App feature="example-feature"/>,
  document.getElementById('root')
);

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,
  },
  user
})(App))

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>
    <b>{feature}</b>
    { 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>)}
  </div>
}

API

react-featureflow-client exposes 2 properties.

import {
  FeatureflowProvider,
  withFeatureflow
} from 'react-featureflow-client';

<FeatureflowProvider client>

Connects your featureflow to your React application. Must only have one child.
| Params | Type | Default | Description | |---------------|----------|--------------|----------------------------------------------------------------| | client* | featureflow | Required | An instantiated featureflow client |

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

Pass the featureflow client to a React Component's props.
| Params | Type | Default | Description | |---------------|----------|--------------|----------------------------------------------------------------| | featureflowConfig | object | {} | Use to set the update property and featureflow clientName specifically for the component. See FeatureflowConfig. | | Component | Component | Required | The component to pass the featureflow client to. |

FeatureflowConfig

| Properties | Type | Default | Description | |---------------|----------|--------------|----------------------------------------------------------------| | update | boolean | false | If set to true then when features update from featureflow, the component will update automatically. | | clientName | string | "featureflow" | Use this to change the prop that the featureflow client will bind to. | | waitForInit | boolean | false | Use this to wait for featureflow to respond with features before the rendering the component | | preInitComponent | ReactComponent | undefined | Use 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{
  onClickHandler(){
    this.props.customFeatureflow.updateContext(/*...*/);
  }
  //...
  render(){
    return (
      <div>
        {this.props.customFeatureflow.evaluate('example-feature').isOn() &&
          <p>
            This text will be shown if "example-feature" is "on".
            It will be updated in realtime if "example-feature" changes it's value.
          </p>
        }
      </div>
    )
  }
}

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

License

Apache-2.0