React Hooks

Hooks 工具函数

Hooks 提供常用工具函数。本页展示防抖、缓存、复制、分页和表单等使用方式。

导入方式

从 @ug666/ui-react 导入需要的 hooks，并和页面组件组合使用。

tsx

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

常用场景

每个示例都可以直接用于真实页面。

useDebounce

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

搜索组件

原始值：— / 防抖值：—

useLocalStorage

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

useMediaQuery

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

当前是否桌面宽度：检测中

useClickOutside

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

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

useCopyToClipboard

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

useToggle

轻松切换布尔值状态。

自动保存

usePagination

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

当前页：2 / 8

当前切片索引：6 - 12

useForm

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

用户名

角色

isDirty: false · errors: {}

使用方式

在 React 组件函数里调用 Hook，把返回值交给页面组件使用。

这些 Hooks 无需额外依赖，和 UGInput、UGButton、UGSwitch 等组件搭配使用。

代码示例

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

tsx

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

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

API

属性	类型	默认值	说明
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	—	管理表单值、错误与脏状态。