README.zh-CN.md

Channelwill Hooks

包含丰富的基础 Hooks, 易学易用。

English | 简体中文

安装

$ npm i @channelwill/hooks
# or
$ yarn add @channelwill/hooks
# or
$ pnpm add @channelwill/hooks

API 文档

详见 https://hooks.baoea.com/

工具 Hooks

• useArrayComparison: 比较两个数组的差异变化。
• useCommunication: 简洁处理组件之间的通信。
• useCurrencyConverter: 货币转换工具，实时汇率，涵盖Shopify180多种货币的自由转换。
• useCurrencyFormat: 格式化国际货币显示。
• useEncryption: 数据的加/解密操作。
• useError: 错误处理工具，配合错误捕获。
• useExportCSV: 导出 CSV 文件。
• useForm: 表单管理，验证规则管理。
• usePagination: 分页功能。
• useScript: 通过链接动态加载脚本。
• useVerification: 提供验证规则工具。
• useCountdown: 提供倒计时工具，同时支持时分秒和验证码倒计时场景。
• useNetworkStatus: 用于监测用户的网络状态。
• useKeyPress: 用于检测特定按键的按下状态。

基础 Hooks

• useDebounce: 防抖函数。
• useMemorizedFn: 记忆化函数，拓展性能优化手段。
• useMount: 组件挂载时调用。
• useSearchListener: URL 查询参数的变化时调用。
• useThrottle: 节流函数。
• useToggle: 状态切换。

DOM Hooks

• useEventListener: 绑定监听 DOM 事件。
• useInViewport: 检测元素是否在视口内。
• useIsMobile: 检测是否为移动设备。
• useOnClickOutside: 点击外部时触发。
• useOnceClick: 只处理一次点击事件。
• usePageLeave: 页面离开时触发。
• useWindowSize: 获取窗口尺寸。
• useScrollPosition: 用于获取当前的滚动位置。
• useAnimationFrame: 用于在每个动画帧中执行回调函数, 常用于性能优化。

例子

在这里提供一些示例代码和演示，以帮助用户更好地理解如何使用这些 hooks。

链接地址

其中示例

import {useWindowSize, useEventListener} from '@channelwill/hooks';

const ExampleComponent = () => {
  const {width, height} = useWindowSize();

  const handleClick = () => {
    console.log('Window clicked!');
  };

  useEventListener('click', handleClick);

  return (
    <div>
      <h1>当前窗口大小: {width} x {height}</h1>
    </div>
  );
};

🤝 参与共建

$ git clone git@github.com:Baoing/hooks.git

$ cd hooks

$ npm install

$ npm run start

打开浏览器访问 http://localhost:6006/

License

MIT License