react-featureflow-client
TypeScript icon, indicating that this package has built-in type declarations

2.0.9 • Public • Published

react-featureflow-client

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

Package Sidebar

Install

npm i react-featureflow-client

Weekly Downloads

36

Version

2.0.9

License

Apache-2.0

Unpacked Size

74.5 kB

Total Files

19

Last publish

Collaborators

  • henry.r.t.young
  • oliverfeatureflow