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-clientVersion 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 startGetting Started
Getting started is simple:
- 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))- You then have access to the
featureflowclient and evaluatedfeaturesusing 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