React SDK

@fujiflag/react provides a provider and hooks for evaluating FujiFlag values in React applications.

Install

npm install @fujiflag/react

Configure the provider

Wrap the part of your application that reads flags with FujiFlagProvider.

import { FujiFlagProvider } from "@fujiflag/react";
export function App() {
  return (
    <FujiFlagProvider
      config={{
        apiKey: "ff-pk-your-api-key-here",
        baseURL: "https://api.fujiflag.com",
        cacheTTL: 5 * 60 * 1000,
        refreshInterval: 60 * 1000,
      }}
    >
      <YourApp />
    </FujiFlagProvider>
  );
}

Read a flag

import { useFlag } from "@fujiflag/react";
export function Checkout() {
  const { value: enabled, loading, error } = useFlag<boolean>("new-checkout");
  if (loading) return null;
  if (error) throw error;
  return enabled ? <NewCheckout /> : <CurrentCheckout />;
}

Use useFlags() when a component needs the complete map of available values.

For the complete package surface, see the SDK README.