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