$ npm i @channelwill/hooks
# or
$ yarn add @channelwill/hooks
# or
$ pnpm add @channelwill/hooks- useArrayComparison: 比较两个数组的差异变化。
- useCommunication: 简洁处理组件之间的通信。
- useCurrencyConverter: 货币转换工具，实时汇率，涵盖Shopify180多种货币的自由转换。
- useCurrencyFormat: 格式化国际货币显示。
- useEncryption: 数据的加/解密操作。
- useError: 错误处理工具，配合错误捕获。
- useExportCSV: 导出 CSV 文件。
- useForm: 表单管理，验证规则管理。
- usePagination: 分页功能。
- useScript: 通过链接动态加载脚本。
- useVerification: 提供验证规则工具。
- useCountdown: 提供倒计时工具，同时支持时分秒和验证码倒计时场景。
- useNetworkStatus: 用于监测用户的网络状态。
- useKeyPress: 用于检测特定按键的按下状态。
- useDebounce: 防抖函数。
- useMemorizedFn: 记忆化函数，拓展性能优化手段。
- useMount: 组件挂载时调用。
- useSearchListener: URL 查询参数的变化时调用。
- useThrottle: 节流函数。
- useToggle: 状态切换。
- 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 startOpen browser access http://localhost:6006/
MIT License