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.

1. Install

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.

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.

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>:

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 (~30 seconds), no refresh needed.

Where to next