Модуль 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.