Tour
Компонент для проведения пошагового обучения пользователя (onboarding) по элементам интерфейса. Позволяет подсвечивать нужные элементы и показывать рядом с ними подсказки.
Компонент является полностью контролируемым. Для его работы необходимо управлять состоянием видимости (open) и текущим шагом (current) извне.
Ключевым параметром является массив steps. Каждый элемент этого массива — это объект, описывающий один шаг тура.
type TourStep = {
/**
* Ссылка (ref) на DOM-элемент, который необходимо подсветить.
*/
target: React.RefObject<HTMLElement>;
/**
* Расположение подсказки относительно целевого элемента.
* @default 'bottom'
*/
placement?:
| 'top'
| 'bottom'
| 'right'
| 'left'
| 'top-start'
| 'top-end'
| 'bottom-start'
| 'bottom-end'
| 'right-start'
| 'right-end'
| 'left-start'
| 'left-end';
/**
* Скругление углов для подсвечиваемой области.
*/
borderRadius?: 'auto' | CSSProperties['color'];
/**
* Название карточки
*/
title?: string;
/**
* Описание карточки
*/
description?: string;
};
Пример
В примере ниже показано, как создать тур по нескольким элементам на странице. Управление состоянием (текущий шаг, открыт/закрыт тур) осуществляется с помощью хуков useState и useRef.