DOM 与浏览器 Hooks

@mbjia/hooks

DOM 与浏览器 Hooks

用于处理元素尺寸、图片加载、点击外部、页面标题等浏览器能力。

适合处理元素尺寸、图片加载、点击外部、页面标题等浏览器能力。

useElementSize

const [ref, size] = useElementSize<HTMLDivElement>()

返回 callback ref 和元素宽高。

const [ref, size] = useElementSize()

return <div ref={ref}>{size.width} x {size.height}</div>

返回值：

下标	类型	说明
0	callback ref	绑定到目标元素。
1	{ width; height }	元素尺寸。

useImageLoad

const [imgMeta, loading] = useImageLoad(url, 320)

返回：

{
  src: string
  width: number
  height: number
  isError: boolean
}

图片加载失败会自动重试 3 次。

参数	类型	说明
url	string	图片地址。
width	number	目标宽度。

返回值	类型	说明
imgMeta	{ src; width; height; isError }	图片信息。
loading	boolean	是否加载中。

useClickOutside

const ref = useClickOutside(() => setOpen(false))

return <div ref={ref}>点击外部关闭</div>

参数	类型	说明
callback	() => void	点击外部时触发。

useCopy

用于把字符串或数字复制到系统剪贴板，并记录最近一次复制成功的文本。

const [copyText, copy] = useCopy()

return (
  <button onClick={() => copy('asset_1001')}>
    {copyText ? `已复制 ${copyText}` : '复制资源 ID'}
  </button>
)

入参：

参数	类型	说明
copy(value)	string | number | undefined	需要复制的内容。源码中无值时会把 copyText 置为空字符串。

返回值：

下标	类型	说明
0	string | undefined	最近一次复制成功的文本；复制失败或传入空值时为空字符串。
1	(text: string) => void	复制函数。实现中兼容 number，类型声明目前只标为 string。

useUserAgent

读取当前浏览器的 window.navigator.userAgent，返回源码中的 isSpider 状态。

const [isSpider] = useUserAgent()

return isSpider ? <RobotFriendlyView /> : <DefaultView />

返回值：

下标	类型	说明
0	boolean	源码当前逻辑为：当 UA 不包含 HeadlessChrome 时置为 true。命名和判断条件容易产生歧义，接入前建议确认业务预期。

usePageTitle

usePageTitle('页面标题')

基于主题配置设置 document.title。