Sticker Board

Свободная композиция из фотографий, наклеек и заметок: двигать и поворачивать. Бесплатно, MIT · Работа и команды › Холсты, выделение и бюджет

Установка

npx valyro-cli@latest add sticker-board

npx shadcn@latest add https://valyro.xyz/r/sticker-board.json

npm install valyro-ui

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

Prop	Type	Default
`items`	`StickerItem[]`		The layout: items with centre, size, angle and stacking order in canvas units. Never changed in place.
`defaultItems`	`StickerItem[]`	`[]`	Initial layout when uncontrolled.
`onItemsChange`	`(items: StickerItem[], reason: StickerChangeReason) => void`		Called with the proposed layout after a finished move, turn, restack or undo.
`canvasSize` *	`BoardSize`		The board's coordinate system. Items keep their place relative to it at any width.
`selectedId`	`string \| null`		Id of the selected item, or null.
`defaultSelectedId`	`string \| null`	`null`	Initial `selectedId` when uncontrolled.
`onSelectedIdChange`	`(id: string \| null) => void`		Called with the new `selectedId` when it changes.
`bounds`	`'contain' \| 'partial'`	`'contain'`	`contain` (default) keeps whole turned items on the board; `partial` lets edges hang over, the centre stays on.
`snap`	`number`	`0`	Grid step in canvas units for moves; 0 (default) turns snapping off.
`rotationStep`	`number`	`15`	Degrees per turn of the toolbar buttons; Shift snaps the turn handle to it. Default 15.
`readOnly`	`boolean`	`false`	Shows the layout without editing.
`labels`	`Partial<StickerBoardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.