@ug666/react 文档演示

Hooks 集合

@ug666/react 同时导出 8 个常用 Hooks，用于处理交互状态、表单、复制、防抖和分页逻辑。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { useDebounce, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, useToggle, usePagination, useForm } from '@ug666/react'

变体预览

逐个展示 8 个 hooks 的典型用法。

useDebounce

延迟处理搜索关键字，减少频繁请求。

搜索组件

原始值：— / 防抖值：—

useLocalStorage

将用户偏好持久化到浏览器。

useMediaQuery

根据断点或系统偏好渲染不同内容。

当前是否桌面宽度：否

useClickOutside

点击卡片外部自动关闭说明面板。

点我外部任意区域即可关闭当前面板。

useCopyToClipboard

复制安装命令并给出短暂反馈。

useToggle

轻松切换布尔值状态。

自动保存

usePagination

生成分页状态与切片索引。

当前页：2 / 8

当前切片索引：6 - 12

useForm

管理表单值、脏状态与错误信息。

用户名

角色

isDirty: false · errors: {}

状态展示

所有 hooks 都围绕业务交互状态而设计。

这些 hooks 无需额外依赖即可直接使用。

尺寸展示

hooks 本身不负责尺寸，但会影响组件在不同布局中的行为。

建议结合 Input、Button、Switch、Pagination 等组件一起使用。

代码示例

下面片段展示多个 hooks 的组合使用。

import { useDebounce, useLocalStorage } from '@ug666/react'

const debouncedKeyword = useDebounce(keyword, 300)
const [theme, setTheme] = useLocalStorage('theme', 'light')

Props 说明

属性	类型	默认值	说明
useDebounce(value, delay)	hook	delay=300	返回延迟更新后的值。
useLocalStorage(key, initialValue)	hook	—	同步 localStorage 与 React state。
useMediaQuery(query)	hook	—	监听媒体查询结果。
useClickOutside(ref, handler)	hook	—	点击元素外部时执行回调。
useCopyToClipboard()	hook	—	复制文本并返回 copied 状态。
useToggle(initial)	hook	false	管理布尔切换。
usePagination(options)	hook	pageSize=10	管理页码、边界和切片索引。
useForm(initialValues)	hook	—	管理表单值、错误与脏状态。