# react-hook-multi-click

**Repository Path**: panda996/react-hook-multi-click

## Basic Information

- **Project Name**: react-hook-multi-click
- **Description**: 监听目标元素在一定时间内多次点击事件。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-19
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-hook-multi-click

[![NPM version](https://img.shields.io/npm/v/react-hook-multi-click.svg?style=flat)](https://npmjs.org/package/react-hook-multi-click)
[![NPM downloads](http://img.shields.io/npm/dm/react-hook-multi-click.svg?style=flat)](https://npmjs.org/package/react-hook-multi-click)

## 介绍

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

## 使用教程

### 安装

```bash
pnpm add react-hook-multi-click

## 或者

npm i react-hook-multi-click

```

### 快速上手

```tsx
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