Image Compare

Сравнение до/после: шторка, рядом, наложение. Pro · Изображения и генерация › Результаты и правка

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add image-compare

npm install valyro-ui-pro

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

Prop	Type	Default
`before` *	`ImageCompareImage`		Original image: before the divider, first side by side, underneath in overlay.
`after` *	`ImageCompareImage`		Result image: after the divider, second side by side, faded over `before` in overlay. Its size sets the aspect ratio.
`mode`	`'slider' \| 'side-by-side' \| 'overlay'`		Controlled `mode`; use with `onModeChange`.
`defaultMode`	`'slider' \| 'side-by-side' \| 'overlay'`	`'slider'`	Initial `mode` when uncontrolled.
`onModeChange`	`(mode: ImageCompareMode) => void`		Called with the new `mode` when it changes.
`position`	`number`		Divider position in percent from the start edge.
`defaultPosition`	`number`	`50`	Initial `position` when uncontrolled.
`onPositionChange`	`(position: number) => void`		Called with the new `position` when it changes.
`opacity`	`number`		Opacity of "after" in overlay mode, 0–1.
`defaultOpacity`	`number`	`0.5`	Initial `opacity` when uncontrolled.
`onOpacityChange`	`(opacity: number) => void`		Called with the new `opacity` when it changes.
`showModes`	`boolean`	`true`	Mode switch above the images. Default true.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ImageCompareLabels>`		Overrides for the built-in English text; keys left out keep their defaults.