Documentation Index
Fetch the complete documentation index at: /docs/llms.txt
Use this file to discover all available pages before exploring further.
Use typed feature flags, targeting, status, and outcomes in React
import {
useBooleanFlag,
useNumberFlag,
useObjectFlag,
useStringFlag,
} from "@superflag-sh/react"
const newCheckout = useBooleanFlag("new-checkout", false)
const buttonCopy = useStringFlag("checkout-copy", "Continue")
const itemLimit = useNumberFlag("checkout-limit", 10)
const theme = useObjectFlag("theme", { color: "violet" })
useFlag remains available for
compatibility, but the type-specific hooks communicate intent and catch more
mistakes.
import { useBooleanFlag, useFlags } from "@superflag-sh/react"
function Checkout() {
const enabled = useBooleanFlag("new-checkout", false)
const { status, stale, source, refresh } = useFlags()
if (status === "loading" || status === "idle") return <CheckoutSkeleton />
return (
<>
{enabled ? <NewCheckout /> : <ClassicCheckout />}
{stale && <button onClick={() => refresh()}>Retry configuration</button>}
<small>Configuration source: {source}</small>
</>
)
}
source: "default" means no validated remote or cached config is serving the
read; the supplied fallback is authoritative.
targetingKey plus JSON-safe attributes:
<SuperflagProvider
clientKey={clientKey}
targetingKey={session.user.id}
attributes={{ plan: session.user.plan, country: session.user.country }}
>
<App />
</SuperflagProvider>
userId is a deprecated
alias for targetingKey.
import { createTypedHooks } from "@superflag-sh/react"
type FlagValues = {
"new-checkout": boolean
"checkout-copy": string
"checkout-limit": number
}
export const superflag = createTypedHooks<FlagValues>()
const enabled = superflag.useFlag("new-checkout", false)
const client = superflag.useClient()
<SuperflagProvider
clientKey={clientKey}
targetingKey={user.id}
telemetry={{ hosted: true }}
>
<App />
</SuperflagProvider>
const client = useSuperflagClient()
const result = await client.track("new-checkout", "checkout-conversion")