React

Install

npm install @flipfeatureflag/react @flipfeatureflag/js

Provider

import { FlipFlagProvider } from "@flipfeatureflag/react";

function App() {
  return (
    <FlipFlagProvider
      config={{
        url: "https://api.example.com",
        sdkKey: "YOUR_SDK_KEY",
        env: "prod",
      }}
    >
      <YourRoutes />
    </FlipFlagProvider>
  );
}

Hooks

import { useFlag, useVariant, useFlagsStatus, useUpdateContext } from "@flipfeatureflag/react";

function Checkout() {
  const { enabled, value } = useFlag("new_checkout");
  const variant = useVariant("new_checkout");
  const status = useFlagsStatus();
  const updateContext = useUpdateContext();

  if (!status.ready) {
    return null;
  }

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

Updating context after login

import { useUpdateContext } from "@flipfeatureflag/react";

function AuthListener({ userId }) {
  const updateContext = useUpdateContext();

  useEffect(() => {
    if (userId) {
      updateContext({ userId });
    }
  }, [userId, updateContext]);

  return null;
}

useFlag return value

useFlag returns { value, enabled }:

• value is the current flag value (boolean/string/number/object).
• enabled is true when the flag exists in the backend response and reason !== "disabled".
• If the flag is missing from the response, enabled is false.
• If reason is default, enabled is still true as long as the flag was returned.