Compare Tray

Полка сравнения: собрать объекты и сравнить в таблице. Бесплатно, MIT · Магазин и платежи › Каталог

Установка

npx valyro-cli@latest add compare-tray

npx shadcn@latest add https://valyro.xyz/r/compare-tray.json

npm install valyro-ui

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

Prop	Type	Default
`items` *	`ComparableItem[]`		Every item that can be compared (usually the catalog).
`fields`	`CompareField[]`	`[]`	Rows of the built-in table, in order.
`selectedIds`	`string[]`		Picked ids, shared with the catalog's compare buttons (see `toggleCompare`).
`defaultSelectedIds`	`string[]`	`[]`	Initial `selectedIds` when uncontrolled.
`onSelectedIdsChange`	`(ids: string[]) => void`		Called with the new `selectedIds` when it changes.
`maxItems`	`number`	`3`	Most items in the tray. Default 3.
`minItems`	`number`	`2`	Fewest items to open the comparison. Default 2.
`placement`	`'inline' \| 'fixed-bottom'`	`'inline'`	`inline` (default) in the page flow; `fixed-bottom` pinned to the viewport, with its height reserved in the flow.
`onCompare`	`(ids: string[]) => void`		Hands the comparison to the app (a page, a route). Not together with `renderComparison`.
`renderComparison`	`(items: ComparableItem[], close: () => void) => ReactNode`		Your own comparison view inside the dialog, instead of the built-in table.
`labels`	`Partial<CompareTrayLabels>`		Overrides for the built-in English text; keys left out keep their defaults.