@teamhelper/hooks

一个实用的 React Hooks 库，提供常用的自定义 Hooks，简化 React 开发。

🚀 特性

• 🎯 TypeScript 支持 - 完整的类型定义
• 🔄 响应式 - 自动追踪依赖变化
• 📦 Tree Shaking - 按需导入，优化包大小
• 🧪 测试友好 - 易于测试和调试
• 🎨 零依赖 - 纯 React Hooks 实现

📦 安装

npm install @teamhelper/hooks
# 或者
yarn add @teamhelper/hooks
# 或者
pnpm add @teamhelper/hooks

🎯 快速开始

import { useDebounce, useLocalStorage } from '@teamhelper/hooks';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useLocalStorage('search', '');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  // 使用 debounced 的值进行搜索
  useEffect(() => {
    if (debouncedSearchTerm) {
      // 执行搜索逻辑
      console.log('搜索:', debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="搜索..."
    />
  );
}

📋 可用 Hooks

useDebounce

防抖 Hook，用于限制函数调用频率。

import { useDebounce } from '@teamhelper/hooks';

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    // 这个效果只会在停止输入 500ms 后触发
    console.log('搜索:', debouncedSearchTerm);
  }, [debouncedSearchTerm]);

  return (
    <input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="输入搜索内容..."
    />
  );
}

参数：

• value: T - 需要防抖的值
• delay: number - 延迟时间（毫秒）

返回值： T - 防抖后的值

useLocalStorage

本地存储 Hook，自动同步状态到 localStorage。

import { useLocalStorage } from '@teamhelper/hooks';

function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [language, setLanguage] = useLocalStorage('language', 'zh-CN');

  return (
    <div>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="light">浅色主题</option>
        <option value="dark">深色主题</option>
      </select>
      <p>当前语言: {language}</p>
    </div>
  );
}

参数：

• key: string - localStorage 键名
• initialValue: T - 初始值
• options?: { serializer?: (value: T) => string; deserializer?: (value: string) => T } - 序列化选项

返回值： [T, (value: T | ((prev: T) => T)) => void] - 状态值和设置函数

useToggle

布尔值切换 Hook，用于开关状态管理。

import { useToggle } from '@teamhelper/hooks';

function Modal() {
  const [isOpen, toggleOpen] = useToggle(false);

  return (
    <div>
      <button onClick={toggleOpen}>{isOpen ? '关闭' : '打开'}模态框</button>
      {isOpen && <div>模态框内容</div>}
    </div>
  );
}

参数：

• initialValue: boolean - 初始值（默认：false）

返回值： [boolean, () => void, (value: boolean) => void] - [状态值, 切换函数, 设置函数]

usePrevious

获取上一个值的 Hook，用于比较当前值和之前的值。

import { usePrevious } from '@teamhelper/hooks';

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <p>当前值: {count}</p>
      <p>上一个值: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

参数：

• value: T - 需要追踪的值

返回值： T | undefined - 上一个值

useIsMounted

检查组件是否已挂载的 Hook，用于防止内存泄漏。

import { useIsMounted } from '@teamhelper/hooks';

function DataFetcher() {
  const isMounted = useIsMounted();
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then((result) => {
      // 只在组件仍然挂载时更新状态
      if (isMounted()) {
        setData(result);
      }
    });
  }, [isMounted]);

  return <div>{data ? data : '加载中...'}</div>;
}

返回值： () => boolean - 返回组件是否挂载的函数

🛠 开发

安装依赖

pnpm install

开发模式

pnpm dev

构建

pnpm build

类型检查

pnpm type-check

📦 构建脚本

我们提供了强大的构建脚本来优化开发体验：

pnpm build

运行增强版构建脚本，包含以下功能：

• 🧹 自动清理旧的构建产物
• ✅ 验证构建结果完整性
• 📊 生成构建信息文件
• 🎯 错误处理和友好提示

pnpm pub

一键交互式发布，自动完成版本选择和npm发布流程。

pnpm pub:quick

快速发布，跳过交互直接构建并发布。

💡 使用建议

1. 按需导入 - 只导入你需要的 hooks，减少包大小
2. 组合使用 - 可以组合多个 hooks 创建复杂的逻辑
3. 类型安全 - 充分利用 TypeScript 类型推断

📄 许可证

MIT © [garvin]

🔗 相关链接

• GitHub 仓库
• 问题反馈
• 文档主页

🤝 贡献

欢迎提交 Issue 和 Pull Request！