Usage

Once a provider is active, reading a flag is a one-liner with OpenFeature hooks from @workspace/flags.

Flag keys

Keys live in one place so web, mobile, and extension stay aligned:

export const Flag = {
  DEMO: "demo",
} as const;

Import Flag from @workspace/flags and pass the constant into hooks.

Evaluate in the UI

import { Flag, useBooleanFlagValue } from "@workspace/flags";

export const BetaNotice = () => {
  const enabled = useBooleanFlagValue(Flag.DEMO, false);

  if (!enabled) {
    return null;
  }

  return <p>Beta features unlocked</p>;
};

The options page uses the same pattern for the demo banner:

const DemoBanner = () => {
  const demo = useBooleanFlagValue(Flag.DEMO, false);

  if (!demo) {
    return null;
  }

  // …
};

Other value types:

Always pass a sensible default as the second argument. That value is used while the provider loads, or if evaluation fails.

Targeting context

apps/extension/src/lib/providers/flags.tsx already syncs auth state into OpenFeature:

if (session.data?.user) {
  const { id, email, name } = session.data.user;
  void setContext({ targetingKey: id, email, name });
  return;
}

void clearContext();

You rarely need to call setContext / clearContext yourself. Import them from @workspace/flags-extension when you do.

With PostHog, context sync maps to identify / reset so person-based rules match your signed-in user.

Add a new flag

export const Flag = {
  DEMO: "demo",
  NEW_SIDE_PANEL: "NEW_SIDE_PANEL", 
} as const;

[Flag.NEW_SIDE_PANEL]: {
  disabled: false,
  variants: { on: true, off: false },
  defaultVariant: "off",
},

const showSidePanel = useBooleanFlagValue(Flag.NEW_SIDE_PANEL, false);

Troubleshooting