Kamod Hooks – 从 ahooks 移植的 Preact hooks 库

Kamod Hooks – a Preact hooks library ported from ahooks

原始链接: https://kamod-ch.github.io/kamod-hooks/

**kamod-hooks** 是一个轻量级的 Preact 优先库，提供了一系列类型化且支持摇树优化（tree-shakeable）的钩子（hooks），旨在提升开发效率。与那些封装 React API 的库不同，kamod-hooks 是专为 Preact 构建的，确保了原生兼容性，并且其核心库没有任何运行时依赖。 该库强调开发者友好体验，提供了 78 个已记录的钩子，并配有 81 个交互式实时演示。这种“所见即所得”的模式允许开发者在浏览器中直接测试行为、查看精确的 TypeScript 签名并验证边缘情况。 主要特性包括： * **Preact 优化：** 专为 Preact 生态系统编写。 * **支持摇树优化：** 支持主包导入和按需钩子子路径导入，以最大限度减小包体积。 * **实用性强：** 涵盖了存储、观察者、全屏和 URL 状态等必要的浏览器原生功能。 * **即插即用：** 文档本身即是模板，提供可直接用于生产环境的代码模式，方便复制使用。 无论您是需要复杂的状态管理还是简单的浏览器原生钩子，kamod-hooks 都提供了一个透明、类型安全且高度模块化的工具包，以加速您的 Preact 开发工作流。

pnpm add @kamod-ch/hooks preact

import { useToggle } from '@kamod-ch/hooks'

export default function UseToggleDemo() {
  const [value, actions] = useToggle('list', 'grid')

  return (
    <div>
      <p><strong>Layout:</strong> {value}</p>
      <div class="demo-actions">
        <button type="button" onClick={actions.toggle}>Toggle</button>
        <button type="button" onClick={actions.setLeft}>Set list</button>
        <button type="button" onClick={actions.setRight}>Set grid</button>
      </div>
    </div>
  )
}