Version Scrubber

Просмотр подготовленных версий одним ползунком. Бесплатно, MIT · Контент и соцсети › Интерактивные объяснения

Установка

npx valyro-cli@latest add version-scrubber

npx shadcn@latest add https://valyro.xyz/r/version-scrubber.json

npm install valyro-ui

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

Prop	Type	Default
`snapshots` *	`VersionSnapshot[]`		Prepared snapshots, in order.
`value`	`string`		Id of the shown snapshot. A controlled id missing from `snapshots` shows an error until a valid one comes.
`defaultValue`	`string`		Initial snapshot when uncontrolled. Default: the first. If it disappears, the first remaining one is shown.
`onValueChange`	`(id: string) => void`		Called with the new `value` when it changes.
`onValueCommit`	`(id: string) => void`		Called when a choice is settled: the slider released, a key, a button or a thumbnail. Not on every pixel.
`renderSnapshot`	`(snapshot: VersionSnapshot) => ReactNode`		Draws a snapshot instead of its image; it handles its own loading and errors.
`aspectRatio`	`number`	`16 / 9`	Width / height of the viewer, reserved before images load. Default 16 / 9.
`showThumbnails`	`boolean`	`true`	A thumbnail row when there are at most 8 snapshots. Default true.
`labels`	`Partial<VersionScrubberLabels>`		Overrides for the built-in English text; keys left out keep their defaults.