React

The React SDK provides a provider and a set of hooks. Flags re-evaluate automatically when your configuration changes, so your components always render the current value.

Install

npm install @softlaunch/react

pnpm add @softlaunch/react

yarn add @softlaunch/react

Set up the provider

Wrap your app in SoftlaunchProvider with a client key (slc_). The provider loads your configuration and keeps it up to date.

import { SoftlaunchProvider } from "@softlaunch/react";

export function App() {
  return (
    <SoftlaunchProvider sdkKey="slc_...">
      <YourApp />
    </SoftlaunchProvider>
  );
}

Read a flag

Each flag type has a hook. Pass the flag key, a subject key, attributes, and a default value.

import { useBooleanFlag } from "@softlaunch/react";

function Checkout() {
  const { value: showRedesign } = useBooleanFlag(
    "checkout-redesign",
    "user-123",
    { plan: "pro" },
    false,
  );

  return showRedesign ? <NewCheckout /> : <OldCheckout />;
}

Available hooks:

useBooleanFlag(flagKey, subjectKey, attributes, defaultValue)
useStringFlag(flagKey, subjectKey, attributes, defaultValue)
useIntegerFlag(flagKey, subjectKey, attributes, defaultValue)
useNumericFlag(flagKey, subjectKey, attributes, defaultValue)
useJsonFlag<T>(flagKey, subjectKey, attributes, defaultValue)

The result object

Every hook returns the same shape:

interface FlagResult<T> {
  value: T;
  isLoading: boolean;
  isFetching: boolean;
  error: string | undefined;
}

Field	Description
`value`	The resolved variation, or your default value.
`isLoading`	`true` during the first load, before any configuration is available.
`isFetching`	`true` while refreshing in the background. `value` stays usable from the previous configuration.
`error`	A message if the configuration failed to load, otherwise `undefined`.

function Banner() {
  const { value, isLoading } = useStringFlag("banner-message", "user-123", {}, "");

  if (isLoading) return null;
  return value ? <div className="banner">{value}</div> : null;
}

Hooks re-render when your configuration updates, so you don’t need to poll or refresh. Just read value.

Get started

Core concepts

SDKs

CLI

Install

Set up the provider

Read a flag

The result object

​Install

​Set up the provider

​Read a flag

​The result object

Install

Set up the provider

Read a flag

The result object