所有 React 实用钩子都集中在一个地方

# 🛠 所有实用挂钩，尽在一处。

在使用 React（或其他框架，例如 NextJS 和 Gatsby）时，我们经常需要使用一些 Hook 来
简化开发工作。但每次都需要自己创建这些 Hook。因此，我创建了这个库，你可以在这里找到你可能需要的所有
实用 Hook（差不多）。

这些句子极其重要

这些钩子都不是我的原创。我是在网上找到的，每次想用的时候都得
反复搜索。所以我创建了这个库，这样就能随时使用了。别担心，你也可以用哦🤝🤝🤝

原始 Hook 取自useHook.ts和useHook.com

什么是 React Hooks？

Hooks 是 React 的一项新功能，它允许你无需编写类即可使用状态和其他 React 特性。该库
提供了易于理解的代码示例，帮助你了解 Hooks 的工作原理，并启发你在下一个项目中充分利用它们
。更多信息请参阅React 文档。

特征

• 除了 React 之外，它没有任何依赖项。
• 压缩/GZIP 格式后仅 5 KB
• 100%模块化设计。只需使用所需的挂钩即可。
• 包含示例的详细文档
• 用 Typescript 编写
• 大多数钩子都是通用的。

当前钩子

• 使用异步
• 使用防抖
• 使用元素大小
• 使用事件监听器
• useFetch
• 使用鼠标悬停
• useImageOnLoad
• 使用交叉观察器
• 使用间隔
• 使用 IsClient
• 使用按键
• 使用本地存储
• 使用锁定身体
• 使用媒体
• 使用 OnClickOutside
• 使用屏幕
• 使用上一个
• 使用屏幕
• 使用脚本
• 使用超时
• 使用切换
• 使用窗口大小
• 使用会话存储
• 使用 SessionStorageWithObject

用法

重要的

该库没有任何默认导出项。

所以你不应该做以下事情（记住，你可以做，但你不应该做）：

    import ReactUtilHooks from 'react-util-hooks'
    // OR
    import * as ReactUtilHooks from 'react-util-hooks'

相反，你应该只导入你需要的钩子。例如，假设你只需要 useClient 钩子。请执行以下操作。

    import {useIsClient} from 'react-util-hooks'
    // OR
    import {useIsClient, useFetch} from 'react-util-hooks'

这样，你的应用包大小会小得多，应用性能也会更好。你也可以选择不
推荐的方式。

    import ReactUtilHooks from 'react-util-hooks'
    // Not Recommended
    function app() {
        const isClient = ReactUtilHooks.useIsClient()
    }

您可以在这里找到包含示例的详细文档。

结论

这些钩子都不是我写的。但我编辑、优化并将它们打包在一起。

我真心希望您喜欢它，欢迎随时提交 PR 添加新的 hook。

如果你愿意，你也可以在这里发送钩子请求或创建错误报告。

另外，这是我的第一篇博客文章，所以我真心希望它不会太糟糕。

谢谢