Hotspot

Description

• Компонент HotSpot добавляет к любому контенту (или отображает отдельно) интерактивную точку‑индикатор с настраиваемым внешним видом и анимацией пульсации.
• Позволяет гибко управлять положением точки относительно дочернего контента через предустановленные варианты placement и точные смещения по осям offsetX/offsetY.
• Поддерживает включение/отключение анимации и самого индикатора через пропсы pulse и enabled, что удобно для сценариев с динамическими подсказками или состояниями.
• Через проп dotRender можно обернуть индикатор в дополнительные компоненты (например, тултип) и расширить взаимодействие с пользователем.
• При отсутствии children компонент может использоваться как самостоятельный индикатор‑точка без привязки к какому‑либо элементу.
• Figma: HotSpot

Installation

npm i @snack-uikit/hot-spot

Changelog

Example

import { HotSpot } from '@snack-uikit/hot-spot';
import { ButtonFilled } from '@snack-uikit/button';
import { Tooltip } from '@snack-uikit/tooltip';

export const HotSpotExample = () => (
  <HotSpot
    appearance='primary'
    placement='right-top'
    pulse
    duration='2s'
    offsetX={8}
    offsetY={-8}
    enabled
    dotRender={dot => (
      <Tooltip placement='bottom' tip='HotSpot dotRender' trigger='click'>
        {dot}
      </Tooltip>
    )}
  >
    <ButtonFilled appearance='neutral' label='Send Message' />
  </HotSpot>
);

HotSpot

Props

| name | type | default value | description | |------|------|---------------|-------------| | appearance | enum Appearance: "neutral", "primary", "red", "orange", "yellow", "green", "blue", "violet", "pink" | primary | Внешний вид | | pulse | boolean | true | Анимация пульсации | | duration | string | 2s | Время анимации пульсации | | placement | enum Placement: "left", "left-top", "left-bottom", "right", "right-top", "right-bottom", "center", "center-top", "center-bottom" | right-top | Положение относительно children. | | dotRender | (dot: ReactNode) => ReactNode | - | Рендер функция для dot | | children | ReactNode | - | Вложенный контент | | offsetX | string \| number | - | Смещение dot по оси X (ось направлена вправо) | | offsetY | string \| number | - | Смещение dot по оси Y (ось направлена вниз) | | enabled | boolean | true | Управление состоянием отрисовки | | className | string | - | CSS-класс | | wrapperClassName | string | - | |