> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useshipd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use React hooks

> Wire ShipdProvider and read typed flags from components.

## Overview

Bind hooks once, wrap the tree, read flags. Full story: [Use shipd in React](/guides/react).

## Bind

```ts theme={null}
import { createShipdReact } from "shipdit/client/react";
import type { FlagDefinitions } from "./generated/flags";

export const { ShipdProvider, useFlag, useVariant, useReady } =
  createShipdReact<FlagDefinitions>();
```

## Provide

```tsx theme={null}
import { createClient } from "shipdit/client";

const client = createClient<FlagDefinitions>({
  sdkKey: "shipd_sdk_client_…",
  endpoint: "https://edge.useshipd.com",
});

<ShipdProvider client={client}>
  <App />
</ShipdProvider>
```

## Read

```tsx theme={null}
function Banner() {
  const ready = useReady();
  const on = useFlag("new-checkout");
  if (!ready) return null;
  return on ? <NewBanner /> : null;
}
```

Use hooks from the **same** factory as the provider. Call `client.identify` in auth code; hooks pick it up via `subscribe`.