Official React bindings for Featureflow Javascript Client
Get your Featureflow account at featureflow.io
npm install react-featureflow-clientThe asyncFeatureflowProvider initializes Featureflow before your app renders, ensuring features are available immediately with no flicker.
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { asyncFeatureflowProvider } from 'react-featureflow-client';
import App from './App';
const FF_KEY = 'js-env-YOUR_KEY_HERE';
const user = {
id: 'user-123',
attributes: {
tier: 'gold',
country: 'australia'
}
};
const initApp = async () => {
const FeatureflowProvider = await asyncFeatureflowProvider({
apiKey: FF_KEY,
user
});
ReactDOM.render(
<FeatureflowProvider>
<App />
</FeatureflowProvider>,
document.getElementById('root')
);
};
initApp();// App.tsx
import React from 'react';
import { useFeatureflow, useFeatures } from 'react-featureflow-client';
function App() {
const featureflow = useFeatureflow();
const features = useFeatures();
const isNewUIEnabled = featureflow.evaluate('new-ui').isOn();
return (
<div>
{isNewUIEnabled ? <NewUI /> : <OldUI />}
{/* Display all features */}
<ul>
{Object.entries(features).map(([key, value]) => (
<li key={key}>{key}: {value}</li>
))}
</ul>
</div>
);
}Initializes the client before React renders. No flicker, features available immediately.
const FeatureflowProvider = await asyncFeatureflowProvider({
apiKey: 'js-env-YOUR_KEY',
user: { id: 'user-123', attributes: { plan: 'premium' } },
config: { offline: false } // optional
});Initializes the client after mount in useEffect. Simpler setup, but may cause brief flicker.
import { FeatureflowProvider } from 'react-featureflow-client';
<FeatureflowProvider
apiKey="js-env-YOUR_KEY"
user={{ id: 'user-123', attributes: { plan: 'premium' } }}
config={{ offline: false }}
>
<App />
</FeatureflowProvider>Use an existing Featureflow client instance:
import Featureflow from 'featureflow-client';
import { FeatureflowProviderWithClient } from 'react-featureflow-client';
const client = await Featureflow.init('js-env-YOUR_KEY', user);
<FeatureflowProviderWithClient client={client}>
<App />
</FeatureflowProviderWithClient>Returns the Featureflow client instance for evaluating features and tracking goals.
const featureflow = useFeatureflow();
// Evaluate a feature
const isOn = featureflow.evaluate('my-feature').isOn();
const variant = featureflow.evaluate('my-feature').value();
// Check specific variant
const isPremium = featureflow.evaluate('pricing-tier').is('premium');Returns all evaluated features as an object. Automatically updates when features change.
const features = useFeatures();
// features = { 'feature-a': 'on', 'feature-b': 'variant-1', ... }Evaluates a single feature and returns the full Evaluate object
(value()/is()/isOn()/isOff()/jsonValue()). Re-evaluates automatically when
features update.
const feature = useFeature('my-feature');
if (feature.isOn()) {
// ...
}Returns the evaluated variant's JSON config payload directly, or undefined if the
variant has none.
const config = useJsonValue<{ color: string }>('my-feature');Returns a stable function for tracking goal events for the current user. The optional
details argument is a number (the metric value) or an object whose optional value is
the metric value and whose remaining properties are sent as custom data.
const track = useTrack();
track('button-clicked');
track('purchase', 49.95);
track('purchase', { value: 49.95, plan: 'pro' });Update the user context at runtime to re-evaluate features (e.g., after login):
const featureflow = useFeatureflow();
// Update user and re-evaluate all features
await featureflow.updateUser({
id: 'new-user-id',
attributes: {
tier: 'premium',
beta: true
}
});The package includes TypeScript definitions. Import types as needed:
import type {
FeatureflowUser,
FeatureflowClient,
Config,
EvaluatedFeatures
} from 'react-featureflow-client';Run the included example:
cd example
yarn install
yarn startThe example demonstrates:
- Switching between async and standard providers
- Editing user context at runtime
- Feature flag evaluation with hooks
| Export | Type | Description |
|---|---|---|
asyncFeatureflowProvider |
Function | Async function returning a provider component |
FeatureflowProvider |
Component | Standard provider component |
FeatureflowProviderWithClient |
Component | Provider accepting an existing client |
useFeatureflow |
Hook | Returns the Featureflow client |
useFeatures |
Hook | Returns evaluated features object |
| Prop | Type | Required | Description |
|---|---|---|---|
apiKey |
string |
Yes | Your Featureflow JS environment SDK key |
user |
FeatureflowUser |
No | User context for targeting |
config |
Config |
No | Client configuration options |
interface FeatureflowUser {
id: string;
attributes?: {
[key: string]: string | number | boolean | string[];
};
}Version 2.x uses the React Context API and requires React 16.3+.
Key changes:
- Use
asyncFeatureflowProviderorFeatureflowProviderinstead ofwithFeatureflowProvider - Use
useFeatureflow()anduseFeatures()hooks instead of HOCs - The
featureflow-clientSDK is now bundled (no separate install needed)
Apache-2.0