tona-hooks

English | 中文

特性

• Preact 兼容 - 为 Preact 构建，兼容 React
• 博客园优化 - 专为博客园环境设计的 Hooks
• TypeScript 支持 - 包含完整的类型定义
• 轻量级 - 可摇树优化，占用空间小

安装

npm install tona-hooks

pnpm add tona-hooks

yarn add tona-hooks

使用

import { useQueryDOM, useLocalStorage, useScroll } from 'tona-hooks'

可用的 Hooks

useAjaxComplete

监听 AJAX 请求完成。

import { useAjaxComplete } from 'tona-hooks'

useAjaxComplete((event, xhr, settings) => {
  console.log('AJAX completed:', settings.url)
})

useEffectOnce

仅在挂载时运行一次 effect。

import { useEffectOnce } from 'tona-hooks'

useEffectOnce(() => {
  console.log('Component mounted')
})

useEventCallback

创建稳定的回调引用。

import { useEventCallback } from 'tona-hooks'

const handleClick = useEventCallback(() => {
  console.log('Clicked!')
})

useIsomorphicLayoutEffect

适用于 SSR 和浏览器的安全 layout effect。

import { useIsomorphicLayoutEffect } from 'tona-hooks'

useIsomorphicLayoutEffect(() => {
  // DOM 测量
}, [])

useLocalStorage

将状态持久化到 localStorage。

import { useLocalStorage } from 'tona-hooks'

const [value, setValue] = useLocalStorage('key', 'defaultValue')

useQueryDOM

查询和观察 DOM 元素。

import { useQueryDOM } from 'tona-hooks'

const element = useQueryDOM('#my-element')

useRafState

与 requestAnimationFrame 同步的状态更新。

import { useRafState } from 'tona-hooks'

const [position, setPosition] = useRafState({ x: 0, y: 0 })

useScroll

跟踪元素的滚动位置。

import { useScroll } from 'tona-hooks'

const [x, y] = useScroll(ref)

useUnmount

在组件卸载时运行清理。

import { useUnmount } from 'tona-hooks'

useUnmount(() => {
  console.log('Component unmounted')
})

useWindowScroll

跟踪窗口滚动位置。

import { useWindowScroll } from 'tona-hooks'

const [x, y] = useWindowScroll()

对等依赖

{
  "preact": ">=10.0.0"
}

相关

• tona - 核心框架
• tona-ui - UI 组件