client SDK

React feature flags

react-featureflow-client is the official React binding. It installs featureflow-client as a dependency, so there is nothing else to add. It is built on hooks, so it needs React 16.8 or later. Use a client key (sdk-js-env-…), which the docs describe as public by design.

React docs · GitHub · react-featureflow-client

Set it up with your coding agent

Paste this into Claude Code, Cursor or any coding agent. It installs the React SDK, creates the client and evaluates your first flag.

Or set it up by hand

Install

npm install --save react-featureflow-client

Initialise

import ReactDOM from 'react-dom/client';
import { asyncFeatureflowProvider } from 'react-featureflow-client';
import App from './App';

const user = {
  id: 'user-123',
  attributes: { tier: 'gold', country: 'australia' },
};

const initApp = async () => {
  const FeatureflowProvider = await asyncFeatureflowProvider({
    apiKey: 'sdk-js-env-YOUR_KEY_HERE',
    user,
  });

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <FeatureflowProvider>
      <App />
    </FeatureflowProvider>
  );
};

initApp();

Evaluate a flag

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

function Checkout() {
  const newCheckout = useFeature('new-checkout');
  if (newCheckout.isOn()) {
    return <NewCheckout />;
  }
  return <LegacyCheckout />;
}

Kill switch

A kill switch is the same useFeature('new-checkout').isOn() check, with the flag left off until you want the new path. Flag values load when the provider starts and when you call updateUser, so a change in the dashboard reaches the page on its next load. Prefer useFeature in render: it re-renders after updateUser, and useFeatureflow().evaluate(key) does not. If a flag has not loaded, the hook reads it as off, so build the kill switch so that off is the safe state.

The operational side is the kill switch. Turning the flag off does not require a redeploy.

Gradual rollout

The percentage is a rule on the flag, not an argument to the hook. Featureflow buckets percentage rollouts on the user id. Pass a stable account id. Call updateUser from useFeatureflow() on login and logout so the bucket follows the person, not an anonymous id that changes.

See progressive rollout for the dashboard control. Release pipelines and approval workflows, if the change itself needs a review, are on the Business plan at $399 a month. That price is on the pricing page.

Targeting

Pass attributes on the user, for example { id, attributes: { tier: 'gold' } }. Dashboard rules match those attributes. updateUser re-renders every component using useFeature or useFeatures. One provider at the root of the tree. Nested providers mean two clients.

Frequently asked questions

Other SDKs

• All SDKs
• JavaScript feature flags
• Node.js feature flags
• Java feature flags
• Python feature flags
• Go feature flags
• .NET feature flags
• iOS feature flags
• Android feature flags