@zedtech/zedkit-flags

useFlag

beta@zedtech/zedkit-flags

Wraps: @openfeature/react-sdk, @openfeature/web-sdk

Preview feature is off (registry default).

Who is it for?: Client components that gate UI on feature flags.
When should I use it?: Apps already using OpenFeature on the web; wrap a subtree that needs typed defaults.
When should I pick something else?: Server Components — evaluate on the server and pass props.

Use it

Simple

import { defineFlagRegistry } from "@zedtech/zedkit-flags";
import { useFlag, ZedkitFlagsProvider } from "@zedtech/zedkit-flags/react";

const registry = defineFlagRegistry({ newDashboard: false });

export function FeatureGate({ children }: { children: React.ReactNode }) {
  return (
    <ZedkitFlagsProvider registry={registry}>
      <FeatureGateInner>{children}</FeatureGateInner>
    </ZedkitFlagsProvider>
  );
}

function FeatureGateInner({ children }: { children: React.ReactNode }) {
  const show = useFlag("newDashboard", false);
  return show ? children : null;
}

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

The published package. Updates arrive with your package manager.

You need

Node.js 22 or newer.

1
Install
Terminal
```
pnpm add @zedtech/zedkit-flags
```

Import

import { ZedkitFlagsProvider, useFlag, OpenFeatureProvider, OpenFeature, TypedInMemoryProvider, useBooleanFlagValue, useStringFlagValue, useNumberFlagValue } from "@zedtech/zedkit-flags/react";

Package version 0.3.1.

Override flags in the browser for local dev

Persist boolean, string, or number overrides in `localStorage` and merge them after OpenFeature evaluation.

Format message templates

Replace `{key}` segments without adopting a full i18n stack.

useFlag

Use it

Kit not installed yet?

Install

Import

On this page