react-hook-multi-click

介绍

监听目标元素在一定时间内多次点击事件。

使用教程

安装

pnpm add react-hook-multi-click

## 或者

npm i react-hook-multi-click

快速上手

import React from 'react';
import { useMultiClick } from 'react-hook-multi-click';

export default () => {
  const targetRef = useRef<HTMLButtonElement>(null);
  const onMultiClick = () => {
    alert('在规定时间内达到了点击次数阈值，触发回调');
  };
  const onClick = () => {
    console.log('每次点击都会触发这个回调');
  };
  const options = {
    targetRef,
    clickCountThreshold: 10,
    timeInterval: 3000,
    onMultiClick,
    onClick,
  };
  const { clickCount } = useMultiClick(options);

  return (
    <div>
      <button ref={targetRef}>点击我</button>
      <p>当前点击次数: {clickCount}</p>
    </div>
  );
};

支持功能

• √ 支持 TypeScript
• √ 支持点击阀值控制
• √ 支持单次点击事件监听
• √ 支持点击阀值事件监听
• √ 支持电脑端和移动端浏览器

LICENSE

MIT