# 添加钩子将新挂钩添加到 shadcn-hooks 项目的指南。事实来源是`src/registry/hooks/`。 `packages/shadcn-hooks/` 目录是通过 `pnpm runsync` 自动生成的，不应手动编辑。 ## 清单复制此清单并跟踪进度：添加挂钩：使用-<名称> - [ ] 步骤 1：创建注册表项 (src/registry/hooks/use-/) - [ ] 步骤2：在meta.json中注册 - [ ] 步骤3：更新introduction.mdx - [ ] 步骤 4：创建技能参考文档 - [ ] 步骤5：更新技能SKILL.md功能表 - [ ] 第 6 步：验证（lint + 测试） ## 第 1 步：创建注册表项创建包含 5 个文件的目录 `src/registry/hooks/use-/`： ### 1a。 `index.ts` - 钩子实现规则： * 使用 `@/registry/hooks/...` 和 `@/registry/lib/...` 导入别名 * 命名导出：`导出函数use(...)` * 从同一文件中导出所有公共类型 * TypeScript 严格，没有“任何” * 尽可能重用现有的钩子（例如 `useBoolean`、`useEventListener`、`useMemoizedFn`）参考示例——简单的钩子： // src/registry/hooks/use-previous/index.ts 从 'react' 导入 { useRef } 导出类型 ShouldUpdateFunc = (上一个?: T, 下一个?: T) => 布尔值 const defaultShouldUpdate = (a?: T, b?: T) => !Object.is(a, b) 导出默认函数 usePrevious( 状态：T， shouldUpdate: ShouldUpdateFunc = defaultShouldUpdate, ): T |未定义{ const prevRef = useRef() const curRef = useRef() if (shouldUpdate(curRef.current, state)) { prevRef.current = curRef.current curRef.current = 状态 } 返回 prevRef.current } 参考示例——钩子组合其他钩子： // src/registry/hooks/use-hover/index.ts 从 '@/registry/hooks/use-boolean' 导入 { useBoolean } 从 '@/registry/hooks/use-event-listener' 导入 { useEventListener } 从 '@/registry/lib/create-effect-with-target' 导入类型 { BasicTarget } 导出接口UseHoverOptions { onEnter?: () => void onLeave?: () => void onChange?: (isHovering: boolean) => void } 导出函数 useHover( 目标：基本目标，选项？：UseHoverOptions， ): 布尔值 { const { onEnter, onLeave, onChange } = 选项 || {} const [状态, { setTrue, setFalse }] = useBoolean(false) 使用事件监听器（ '鼠标输入', () => { onEnter?.() 设置真() onChange?.(true) }, { 目标 }, ）使用事件监听器（ '鼠标离开', () => { onLeave?.() 设置假（） onChange？.（假） }, { 目标 }, ）返回状态 } ### 1b。 `registry-item.json` — 依赖项 { “registryDependency”：[“@hooks/use-dependency-a”，“@hooks/use-dependency-b”] } * 列出该钩子依赖的所有钩子/库，前缀为`@hooks/` * 如果没有依赖项： `{ "registryDependencies": [] }` ### 1c。 `demo/demo-01.tsx` — 演示组件 “使用客户端” 从 '..' 导入 { use } 导出函数 Demo01() { // 展示钩子的交互式演示 } 规则： * 必须是客户端组件（`'使用客户端'`） * 从“..”（父目录）导入钩子 * 使用 `~/components/ui/...` 中的 shadcn UI 组件（例如 `Button`、`Card`、`Input`） * 演示应该是交互式的并清楚地显示钩子的行为 ### 1d。 `index.mdx` — 文档页面 --- 标题：使用<名称> 描述：<描述>的钩子 --- 从 './demo/demo-01' 导入 { Demo01 } <演示01 /> ## 安装 <选项卡项={['CLI', '手册']}> <选项卡> <选项卡> 将以下代码复制并粘贴到您的项目中。 ## API ````ts // 这里有完整的类型声明 `````` ## 学分 - [使用-<名称>]（信用链接）注意事项： * 如果挂钩具有内部依赖项，请在“手动”选项卡下添加多个“”条目（请参阅“use-boolean”，其中包括“use-toggle”） * API 部分应包含完整的 TypeScript 类型声明 ### 1e。 `index.test.ts` — 测试从 '@testing-library/react' 导入 { act, renderHook } 从 'vitest' 导入 { 描述、期望、它 } 从 './index' 导入 { use } 描述('使用<名称>', () => { 它('应该...', () => { const { 结果 } = renderHook(() => use<名称>(...)) 期望(结果.当前).toBe(...) }) }) 规则： * 使用 `vitest` \+ `@testing-library/react` * 从“./index”导入 * 涵盖：默认行为、状态变化、边缘情况、回调 * 对于基于 DOM 的钩子，在 `beforeEach` 中创建元素/在 `afterEach` 中清理 ## 第 2 步：在 `meta.json` 中注册将“use-”添加到适当类别下的“src/registry/hooks/meta.json”： * `---State---` — 状态管理钩子 * `---高级---` — 记忆、参考、高级模式 * `---Lifecycle---` — 效果、计时器、安装/卸载 * `---Browser---` — DOM、事件、浏览器 API * `---Dev---` — 开发/调试实用程序 * `---External---` — 外部库的包装器 ## 步骤 3：更新介绍页面将新挂钩添加到相应类别部分下的“content/docs/introduction.mdx”： * **状态管理** — 状态管理挂钩 * **高级** — 记忆、参考、高级模式 * **生命周期和效果** — 效果、计时器、安装/卸载 * **浏览器** — DOM、事件、浏览器 API * **Dev** — 开发/调试实用程序 * **外部库** - 外部库的包装器在类别中按字母顺序添加一行： - [`use<名称>`](/docs/hooks/use-<名称>) - <简短描述> ## 步骤 4：创建技能参考创建 `skills/shadcn-hooks/references/use.md`： # 使用<名称> <单行描述>。 ## 用法 ````tsx 从 '@/hooks/use-<名称>' 导入 { use<名称> } 函数组件() { // 最小使用示例 } `````` ## 类型声明 ````ts // 完整的类型签名 `````` ## 参数 |参数|类型 |默认 |描述 | | --------- | ---- | -------- | ----------- | | ... | ... | ... | ... | ## 返回 |类型 |描述 | | ---- | ----------- | | ... | ... | ## 步骤5：更新技能功能表在 `skills/shadcn-hooks/SKILL.md` 中的相应类别表中添加一个条目： | [`use<名称>`](引用/use<名称>.md) | <描述> |自动 | * 对独立钩子使用“AUTO” * 使用“EXTERNAL”作为包装外部 npm 包的钩子 ## 第 6 步：验证 1.运行linter：检查编辑的文件是否有lint错误 2. 运行测试：`pnpm test run src/registry/hooks/use-/index.test.ts` 3. 验证开发服务器正确呈现文档页面（如果正在运行） ## 注释 * `packages/shadcn-hooks/` 是自动生成的。在 `packages/shadcn-hooks/` 中运行 `pnpm runsync` 以在添加新钩子后重新生成。 * `packages/shadcn-hooks/src/index.ts` 导出也是自动管理的 - 无需手动编辑。

添加挂钩

包含技能