React SDK

@switchbox/react adds React hooks and a component on top of switchbox-js. It contains no evaluation or networking logic of its own — just React primitives that re-render when a flag changes.

npm install switchbox-js @switchbox/react

switchbox-js is a peer dependency — you create the client with it and hand it to the provider. The same reference ships in the README on npm.

SwitchboxProvider

Wrap your app once, near the root, with a client you created via the core SDK:

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

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

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

The provider subscribes to the client's config changes, so every hook below re-renders when a new config arrives (within one poll interval of a dashboard change).

useFlag(key, user?)

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

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

Returns the current boolean for a flag and re-renders the component when it changes. Returns false until the first config loads or if the flag is absent.

useValue(key, user?, default?)

import { useValue } from '@switchbox/react';

function ThemedPage() {
  const theme = useValue('theme', { user_id: '42' }, 'light');
  return <div className={theme}>…</div>;
}

Returns the resolved value of a string, number, or JSON flag (a json flag comes back as a parsed object/array), falling back to default.

useClient()

import { useClient } from '@switchbox/react';

function Advanced() {
  const client = useClient();
  // the underlying switchbox-js client, for getAllFlags(), destroy(), etc.
}

Returns the switchbox-js client from context, for cases the hooks don't cover.

Feature

A declarative wrapper — render children when the flag is on, fallback otherwise:

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

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

Next

• JavaScript SDK — the client these hooks wrap.
• React quickstart — the three-step setup.