Alpine.js 的钩子

该 Alpine Hooks 模块是用于 Alpine.js 的钩子集合。此包包含各种钩子，用于改进常见 Alpine 任务的开发人员体验 (DX)。

自从我为 @Alpine_JS 发布了一些东西以来已经有一段时间了，所以这里有一个新包：alpine-hooks。受 React 中钩子的启发，这些神奇的函数提供了一些有用的帮助程序，我发现自己在大量的项目中使用它们。查看一下！https://t.co/FMTP9WO3tE

— Ryan Chandler (@ryangjchandler) 2023 年 6 月 6 日

在撰写本文时，此模块具有以下钩子

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

以下是在 GitHub 的 示例 文件夹中 $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 上了解有关此包的更多信息，获取完整的安装说明，并查看 源代码。