Alpine.js 钩子

Alpine Hooks 模块是 Alipine.js 使用的一系列钩子。该包包含了许多钩子，用来改进通用 Alpine 任务的开发者体验(DX)。 

本文写作时，该模块有以下钩子：

• $useHover() - 对鼠标悬停在元素上做出反应
• $useFocus() - 对聚焦和 blur 的元素作出反应
• $useHash() - 更新 window.location.hash 并对其更改做出反应
• $useWindowSize() - 返回窗口宽度和高度，并对窗口大小的更改作出反应

以下是一个 $useHover()  的一个例子：

<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 将其安装到项目中：

npm install @ryangjchandler/alpine-hooks

更多详情查看 GitHub 源码。