> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.fujiflag.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.fujiflag.com/_mcp/server.

# React SDK

> Read FujiFlag values in React with a provider and hooks.

# React SDK

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

## Install

```bash
npm install @fujiflag/react
```

## Configure the provider

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

```tsx
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

```tsx
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](https://github.com/haris-syed/FujiFlag/tree/main/fujiflag-react).