Channelwill Hooks
安装
npm i @channelwill/hooks
# or
yarn add @channelwill/hooks
# or
pnpm add @channelwill/hooks
API 文档
工具 Hooks
- useArrayComparison: 比较两个数组的变化。
- useCommunication: 处理组件之间的通信。
- useCurrencyConverter: 货币转换工具。
- useCurrencyFormat: 格式化货币显示。
- useEncryption: 数据加密。
- useError: 错误处理工具。
- useExportCSV: 导出 CSV 文件。
- useForm: 表单管理。
- usePagination: 分页功能。
- useScript: 动态加载脚本。
- useVerification: 提供验证规则工具。
基础 Hooks
- useDebounce: 防抖函数。
- useMemorizedFn: 记忆化函数。
- useMount: 组件挂载时调用。
- useThrottle: 节流函数。
- useToggle: 状态切换。
DOM Hooks
- useEventListener: 绑定监听 DOM 事件。
- useInViewport: 检测元素是否在视口内。
- useIsMobile: 检测是否为移动设备。
- useOnClickOutside: 点击外部时触发。
- useOnceClick: 只处理一次点击事件。
- usePageLeave: 页面离开时触发。
- useWindowSize: 获取窗口尺寸。
Demo
在这里提供一些示例代码和演示,以帮助用户更好地理解如何使用这些 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>
);
};
License
MIT License
欢迎大家给我提意见或者需求,需要源码或者交流学习可联系我