useFlag

Access feature flags from PostHog in client components.

Import

import {  } from "@repo/analytics"

Usage

"use client"

import {  } from "@repo/analytics"

export function () {
  const  = ("new-checkout-flow")

  if (!) return null

  return <NewCheckoutFlow />
}

Parameters

Parameter	Type	Description
`name`	`string`	The feature flag key from PostHog

Return Value

Returns the flag value (boolean, string, or undefined if not found).

Examples

Boolean flag

const  = ("beta-features")

if () {
  return <BetaUI />
}

String/variant flag

const  = ("pricing-experiment")

switch () {
  case "variant-a":
    return <PricingA />
  case "variant-b":
    return <PricingB />
  default:
    return <PricingControl />
}

With fallback

Handle undefined flags gracefully:

const  = ("new-feature") ?? false

Typed flags

For type safety across your app:

interface MyFlags {
  "new-checkout-flow": boolean
  "pricing-experiment": "control" | "variant-a" | "variant-b"
}

const  = <MyFlags, "pricing-experiment">("pricing-experiment")
// Type: "control" | "variant-a" | "variant-b" | undefined

Setup

Feature flags require PostHog. See Feature Flags for configuration.

On this page