# React quickstart

> Wire the React hooks into your app and see your first flag fetch.

The React package is a thin wrapper over `switchbox-js` — same engine, plus hooks
and a component that re-render when a flag changes. This assumes you've created a
flag and copied a `development` SDK key — if not, start with the
[Quickstart](/docs/quickstart).

## 1. Install

```bash
npm install switchbox-js @switchbox/react
```

`switchbox-js` is the peer that does the actual work; `@switchbox/react` adds the
React primitives.

## 2. Create a client and wrap your app

Create one client (with the core SDK) and pass it to `SwitchboxProvider` near the
root of your tree.

```tsx
import { Switchbox } from 'switchbox-js';
import { SwitchboxProvider } from '@switchbox/react';

const client = await Switchbox.create({
  sdkKey: 'your-sdk-key-from-dashboard',
});

function Root() {
  return (
    <SwitchboxProvider client={client}>
      <App />
    </SwitchboxProvider>
  );
}
```

## 3. Use a flag in a component

`useFlag` returns the current boolean and re-renders the component when the flag
changes in the background — no manual polling.

```tsx
import { useFlag } from '@switchbox/react';

function Checkout() {
  const showNew = useFlag('new_checkout', { user_id: '42' });
  return showNew ? <NewCheckout /> : <OldCheckout />;
}
```

Prefer a declarative style? Use `<Feature>`:

```tsx
import { Feature } from '@switchbox/react';

function Dashboard() {
  return (
    <Feature flag="new_dashboard" user={{ user_id: '42' }} fallback={<OldDashboard />}>
      <NewDashboard />
    </Feature>
  );
}
```

## See it connect

Render the app. Within a few seconds, the `development` environment in the
dashboard shows a **Connected ✓** badge.

Now flip the flag in the dashboard and **Save** — the component re-renders to the
new value within one poll interval (~10 seconds), no refresh needed.

## Where to next

- [React SDK reference](/docs/sdk/react) — every hook and prop.
- [JavaScript SDK reference](/docs/sdk/javascript) — the underlying client.
- [Targeting rules](/docs/concepts/targeting) and
  [rollouts](/docs/concepts/rollouts).
- [Use with OpenFeature](/docs/sdk/openfeature): already on the vendor-neutral API? Switchbox is one provider line.