Тестовый npm пакет
npm install test-npm-publish-aДля начала нужно обернуть приложение провайдером GuideProvider.
В качестве пропсов ему обязательно нужно передать steps - шаги инструкции и ContentComponent -
компонент который будет отображаться рядом с подсвечиваемой областью.
- Опционально можно передать другие пропсы которые определены в ProviderProps
- Инструкцию можно синхронизировать с localStorage. Для этого нужно пропс localStorageKey в виде
строки.
- Можно передать функцию onChangeStep которая будет делать что-то при переходе на шаг (например сохранять
состояние инструкции на сервере). Ее можно передать как в пропсы провайдера так и определить
в каждом шаге. Функция в шаге имеет приоритет перед переданной в провайдер
- Функции beforeStart и beforeStop будут выполняться перед стартом и остановкой инструкции
- Инструкция использует 2 контекста:
1. В первом определена вся инструкция (статус, все шаги, активный / предыдущий / следующий шаг и т.д).
Данные доступны с помощью хука useGuide.
2. Дает мемоизированные хелперы которые позволяют изменять инструкцию в любом месте приложения
(updateSteps, onNextStep, onBackStep, onStart и т.д). Доступны по хуку useGuideHelpers
- Инструкция имеет следующие состояния:
1. Idle - начальное состояние
2. Waiting - в это состояние инструкция переходит сразу после запуска (вызова функции onStart). Далее она может перейти в
состояние Active если удалось найти элемент на странице, иначе в Stopped. В состоянии Waiting
инструкция может оказаться если при переходе между шагами уже запущенной инструкции она не смогла
найти шаг. В таком случае если шаг будет найдет то снова перейдет в Active иначе в Paused
3. Active - в этот статус инструкция переходит когда запущена
4. Paused - если инструкция не находит шаг по селектору (кроме первого), то переходит в этот статус.
5. Stopped - переходит при срабатывании функции onStop и в случае если не был найден 1-й шаг инструкции.
6. Skipped - переходит при срабатывании onSkip. В данный момент статус не имеет каких-то особенностей.
Может потребоваться только вне инструкции
- Компоненты инструкции:
1. Mask - прожектор, подсвечивает текущий элемент, а также затемняет все остальное пространство
2. Popper - обертка для кастомного компонента подсказки. Позиционирует подсказку рядом с прожектером
- Хуки
1. useLocalStorage - синхронизирует инструкцию с локал сторажем. Позволяет сохранять состояние при
перезагрузки страницы.
2. useMutationObserver - следит за добавлением,удалением элементов, аттрибутов в DOM. Перерасчитывает
размеры прожектера и его положение если оно поменялось
3. useResizeObserver - следит за размерами текущего элемента. Если размеры меняются то перерасчитает
размеры выделенной области.