Feature Hotspots

Точки на изображении: нажатие открывает пояснение к детали. Бесплатно, MIT · Контент и соцсети › Интерактивные объяснения

Установка

npx valyro-cli@latest add feature-hotspots

npx shadcn@latest add https://valyro.xyz/r/feature-hotspots.json

npm install valyro-ui

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

Prop	Type	Default
`image` *	`FeatureHotspotsImage`		The picture and its text alternative.
`hotspots`	`Hotspot[]`	`[]`	Points with notes, in reading order (the Tab order). Ids must be unique; a repeated id is skipped.
`fit`	`'contain' \| 'cover'`	`'contain'`	How the image fills the area: `contain` (default) shows all of it, `cover` fills it and may crop points away.
`aspectRatio`	`number \| string`		Proportions of the image area (`16 / 9`). Default: the image's own (`width / height`), else 16 / 9.
`activeId`	`string \| null`		Id of the open point, or null.
`defaultActiveId`	`string \| null`	`null`	Initial `activeId` when uncontrolled.
`onActiveIdChange`	`(id: string \| null) => void`		Called with the new `activeId` when it changes.
`mobilePresentation`	`'sheet' \| 'below'`	`'below'`	Where the note opens on a narrow block (under 560 px): a bottom sheet or a panel under the image. Default `below`.
`showList`	`boolean`	`true`	The text list of every detail under the image. Default true; it still shows when points are cropped away or the image fails.
`marker`	`'number' \| 'dot'`	`'number'`	Marker look: the point's number (default) or a small dot. A point's `icon` wins over both.
`pulse`	`boolean`	`false`	A slow pulse on the markers; never under reduced motion. Default false.
`labels`	`Partial<FeatureHotspotsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.