Feature Flag Simulator

Превью продукта при разных фичефлагах и сегментах, без доступа к продакшену. Pro · Разработчикам › Сервис и релизы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add feature-flag-simulator

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FeatureFlagSimulator } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`flags` *	`FeatureFlag[]`		Flag configuration to simulate (as exported from your flag service).
`segments` *	`FlagSegment[]`		Audiences to preview, e.g. "Free plan", "EU enterprise", "Beta testers".
`segment`	`string`		Segment being previewed.
`defaultSegment`	`string`		Initial segment when uncontrolled. Default: the first.
`onSegmentChange`	`(segment: string) => void`		Called when the reader picks another segment.
`overrides`	`Record<string, string>`		Variants forced for the preview: flag key → variant. Local only, never sent anywhere.
`defaultOverrides`	`Record<string, string>`		Initial overrides when uncontrolled.
`onOverridesChange`	`(overrides: Record<string, string>) => void`		Called with all overrides after one is set or reset.
`onVariantChange`	`(flag: string, variant: string \| null, assignment: Record<string, string>) => void`		Called when the reader sets (or resets, `null`) a flag's variant, with the resulting assignment.
`renderPreview`	`(assignment: Record<string, string>, segment: FlagSegment \| undefined) => ReactNode`		Your product UI for an assignment (flag key → variant). Rendered on the server too: keep it pure.
`view`	`'preview' \| 'matrix'`		`preview` (default): one segment with its preview; `matrix`: every flag across every segment.
`defaultView`	`'preview' \| 'matrix'`	`'preview'`	Initial view when uncontrolled.
`onViewChange`	`(view: FeatureFlagView) => void`		Called when the reader switches the view.
`loading`	`boolean`	`false`	Flags are loading: skeleton.
`error`	`ReactNode`		Loading failed: shown instead of the simulator.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3).
`labels`	`Partial<FeatureFlagSimulatorLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Feature Flag Simulator

Установка

Пропсы

Похожие компоненты