featuretoggle-sdk-react

React adapter for featuretoggle-sdk-typescript — FeatureToggleProvider, useFeature, and useFeatureToggle.

Install

npm install featuretoggle-sdk-react featuretoggle-sdk-typescript react
# or
pnpm add featuretoggle-sdk-react featuretoggle-sdk-typescript react
# or
yarn add featuretoggle-sdk-react featuretoggle-sdk-typescript react
# or
bun add featuretoggle-sdk-react featuretoggle-sdk-typescript react

Peers: react (≥18), featuretoggle-sdk-typescript (^1.1.0).

Quick start

import { FeatureToggleProvider, useFeature } from "featuretoggle-sdk-react";

function App() {
  return (
    <FeatureToggleProvider apiKey={import.meta.env.VITE_FT_API_KEY}>
      <Checkout />
    </FeatureToggleProvider>
  );
}

function Checkout() {
  const { enabled, loading } = useFeature("new-checkout");
  if (loading) return null;
  return enabled ? <NewCheckout /> : <LegacyCheckout />;
}

Cookbook

Full recipes in INTEGRATION.md (Cookbook):

| Pattern | See | |---------|-----| | Client-only SPA | INTEGRATION.md | | Stream off + poll | INTEGRATION.md | | Bring-your-own client | INTEGRATION.md | | SSR seed (no flash) | INTEGRATION.md | | SSR props (component-level) | INTEGRATION.md | | Companion hook (bulk / refresh) | INTEGRATION.md | | Manual init | INTEGRATION.md |

Server loader patterns: TypeScript cookbook.

API

• <FeatureToggleProvider> — apiKey, optional client, stream, pollInterval, initialFeatures, initialEtag, autoInit (default true)
• useFeature(key) — { enabled, value, loading, error }
• useFeatureToggle() — { init, refresh, getFeatures, loading, error }

stream and pollInterval forward to the owned Core client (same semantics as featuretoggle-sdk-typescript). Use BYO client for custom fetch / visibility.

Import FeatureResponse from featuretoggle-sdk-typescript — not re-exported from this package.