Модуль Alpine Hooks представляет собой коллекцию крючков для использования с Alpine.js. Этот пакет содержит различные хуки, используемые для улучшения взаимодействия с разработчиком (DX) для распространенных задач Alpine.
Прошло много времени с тех пор, как я выпустил что-то для @Alpine_JS, так что вот новый пакет: альпийские крючки. Вдохновленные хуками в React, эти волшебные функции предоставляют несколько полезных помощников, которые я использую во множестве проектов. Взгляните!
— Ryan Chandler (@ryangjchandler) June 6, 2023
https://t.co/FMTP9WO3tE На момент написания статьи этот модуль имеет следующие хуки:
-
$useHover()
- реагировать на наведение курсора мыши на элемент -
$useFocus()
- реагировать на то, что элемент сфокусирован и размыт -
$useHash()
- обновлять и реагировать на изменения вwindow.location.hash
-
$useWindowSize()
- Возвращает ширину и высоту окна и реагирует на изменения размера окна
Вот пример $useHover()
из папки examples на GitHub:Вы можете установить этот пакет в свой проект с помощьюnpm
:
<div x-data="{ hovering: $useHover($refs.target) }" class="py-8">
<div
class="w-52 h-64 rounded bg-red-500 transition-colors ease-in-out duration-300 mx-auto flex items-center justify-center"
x-bind:class="{
'bg-red-500': !hovering,
'bg-blue-500': hovering
}"
x-ref="target"
>
<p class="font-medium" x-text="hovering ? 'Hovering...' : 'Not hovering...'"></p>
</div>
</div>
npm install @ryangjchandler/alpine-hooks
Вы можете узнать больше об этом пакете, получить полные инструкции по установке и просмотреть исходный код на GitHub.