Peel Sticker

Наклейка отклеивается за угол и открывает содержимое. Бесплатно, MIT · Анимированные компоненты › Наклейки, билеты и табло

Установка

npx valyro-cli@latest add peel-sticker

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

npm install valyro-ui

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

Prop	Type	Default
`cover` *	`ReactNode`		The face of the sticker: what lies on top while it is closed.
`children`	`ReactNode`		What the sticker reveals. It cannot be focused while the sticker is closed.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean, reason: PeelStickerReason) => void`		A request to open or close, once per button press or finished gesture (`reason`), when it is decided, without waiting for the animation. Not a confirmation of anything on a server.
`corner`	`'top-start' \| 'bottom-end'`	`'bottom-end'`	The lifted corner, on the logical sides (mirrored in right-to-left pages). Default `bottom-end`.
`threshold`	`number`	`0.55`	Share of the diagonal the corner must be peeled before release opens the sticker (a quick flick needs less). Default 0.55.
`reclosable`	`boolean`	`true`	Show a Close action once open. Default true.
`material`	`'paper' \| 'gloss' \| 'foil'`	`'paper'`	Material of the sticker: `paper` (default), `gloss` or `foil`. Same mechanics, different surface.
`disabled`	`boolean`	`false`	Neither the gesture nor the button work.
`labels`	`Partial<PeelStickerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.