React SDK

The @flagify/react package provides React hooks and a context provider for evaluating feature flags in React applications.

Installation

npm install @flagify/react

Setup

Wrap your application with the FlagifyProvider:

import { FlagifyProvider } from '@flagify/react';

function App() {
  return (
    <FlagifyProvider
      projectKey="my-project"
      publicKey="pk_dev_abc123_xxxxxxxx"
      options={{ realtime: true }}
    >
      <YourApp />
    </FlagifyProvider>
  );
}

Provider props

The provider accepts all FlagifyOptions from @flagify/node plus children:

Hooks

useFlag

Evaluate a boolean flag. Returns the flag’s evaluated value (true or false). When the flag is disabled, returns its offValue. Returns false if the flag doesn’t exist:

import { useFlag } from '@flagify/react';

function Navbar() {
  const showNewNav = useFlag('new-navbar');

  return showNewNav ? <NewNavbar /> : <ClassicNavbar />;
}

useVariant

Get the winning variant key for a multivariate flag. Returns the variant with the highest weight:

import { useVariant } from '@flagify/react';

function Checkout() {
  const variant = useVariant('checkout-flow', 'classic');

  switch (variant) {
    case 'streamlined':
      return <StreamlinedCheckout />;
    case 'classic':
    default:
      return <ClassicCheckout />;
  }
}

useFlagValue

Get a typed value from a flag. When disabled, returns the server’s offValue. The fallback is used only when the flag doesn’t exist in cache:

import { useFlagValue } from '@flagify/react';

function Banner() {
  const message = useFlagValue<string>('banner-message', 'Welcome!');

  return <div className="banner">{message}</div>;
}

const config = useFlagValue<{ maxItems: number }>('cart-config', { maxItems: 50 });

useIsReady

Check if the initial flag sync is complete:

import { useIsReady, useFlag } from '@flagify/react';

function Feature() {
  const isReady = useIsReady();
  const enabled = useFlag('new-feature');

  if (!isReady) return <Skeleton />;
  return enabled ? <NewFeature /> : <OldFeature />;
}

useFlagifyClient

Access the underlying Flagify client directly:

import { useFlagifyClient } from '@flagify/react';

function DebugPanel() {
  const client = useFlagifyClient();
  // Use client.isEnabled(), client.getValue(), etc.
}

Real-time updates

When realtime: true is set on the provider, all hooks automatically re-render when flags change via SSE. No additional configuration needed.

<FlagifyProvider
  projectKey="my-project"
  publicKey="pk_dev_abc123_xxxxxxxx"
  options={{ realtime: true }}
>
  {/* Components using useFlag will re-render when flags change */}
  <YourApp />
</FlagifyProvider>