@featherflag/react 🪶

React 18 and React 19 SDK for FeatherFlag with instant real-time updates and Zero Cumulative Layout Shift (0.000 CLS).

Features

• ⚡ Zero-Latency In-Memory Evaluation: Evaluates flags in under 0.05ms without network roundtrips on render.
• 🔄 Real-Time Live Synchronization: Subscribes to Server-Sent Events (SSE) and cross-tab BroadcastChannel. Toggling flags in the Dashboard updates React components live without page refresh.
• 🛡️ Zero Layout Shift (CLS: 0.000): Pre-hydrates initial snapshot from Next.js Server Components / SSR to eliminate UI jumping.
• 🔒 Client-Safe Sanitization: Server-side targeting AST rules are never leaked to the browser.

Installation

npm install @featherflag/react
# or
pnpm add @featherflag/react

Quickstart

import React from 'react';
import { FeatherClientProvider, useFlag, FeatureGate } from '@featherflag/react';

export function App({ initialFlags }) {
  return (
    <FeatherClientProvider
      clientKey="ff_client_live_prod456"
      baseUrl="/api/v1"
      initialFlags={initialFlags}
      realtime={true}
    >
      <MyPage />
    </FeatherClientProvider>
  );
}

function MyPage() {
  const isEnabled = useFlag('ai-copilot-v2', false);

  return (
    <div>
      {isEnabled ? <AICopilot /> : <StandardUI />}

      <FeatureGate flag="new-checkout-v3" fallback={<OldCheckout />}>
        <OneClickCheckout />
      </FeatureGate>
    </div>
  );
}

License

MIT