Diff Viewer

Дифф нескольких файлов: список со статистикой, unified и split, подсветка слов. Pro · Разработчикам › Код и логи

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add diff-viewer

npm install valyro-ui-pro

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

Prop	Type	Default
`files` *	`DiffFile[]`		Changed files, each with its text before and after; the diff is computed from the two texts.
`title`	`ReactNode`		Shown at the start of the header, before the summary.
`view`	`'unified' \| 'split'`		Below ~560px of diff width `split` shows as `unified` (two columns that narrow would break code mid-token), and the view switch is hidden until there is room again.
`defaultView`	`'unified' \| 'split'`	`'unified'`	Default `unified`.
`onViewChange`	`(view: DiffViewerView) => void`		Called with the new `view` when it changes.
`context`	`number`	`3`	Unchanged lines kept around each change; longer unchanged runs collapse. Default 3.
`collapsed`	`string[]`		Paths of files shown collapsed.
`defaultCollapsed`	`string[]`	`[]`	Initial `collapsed` when uncontrolled.
`onCollapsedChange`	`(paths: string[]) => void`		Called with the new `collapsed` when it changes.
`showFileList`	`boolean`		File list beside the diff. Default: when there is more than one file.
`height`	`CSSProperties['height']`	`560`	Height of the scrolling diff area. Default 560.
`locale`	`string`		BCP 47 locale for counts. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<DiffViewerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.