Skip to main content
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

​
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;
}
FieldDescription
valueThe resolved variation, or your default value.
isLoadingtrue during the first load, before any configuration is available.
isFetchingtrue while refreshing in the background. value stays usable from the previous configuration.
errorA 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.