# use-long-press

> React hook for detecting click, tap or point and hold event. Easy to use, highly customizable options, thoroughly tested.

Latest version **3.3.0** (published 2025-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-long-press
pnpm add use-long-press
yarn add use-long-press
bun add use-long-press
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.3.0 |
| Published | 2025-03-16 |
| First published | 2020-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 67 |
| Author | minwork |
| Maintainers | minwork |
| Keywords | long press, hook, react, click and hold, tap and hold, point and hold |

## Links

- npm: https://www.npmjs.com/package/use-long-press
- Repository: https://github.com/minwork/react
- Homepage: https://minwork.gitbook.io/long-press-hook/
- Issues: https://github.com/minwork/react/issues
- npm.io page: https://npm.io/package/use-long-press

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.3.0 (latest) — 2025-03-16
- 3.3.0-preview.0 (preview) — 2025-03-01
- 3.2.1-alpha.3 — 2024-07-10
- 3.2.1-alpha.2 — 2024-07-09
- 3.2.1-alpha.1 — 2023-12-08
- 3.2.0 — 2023-08-15
- 3.2.0-alpha.3 — 2023-08-15
- 3.2.0-rc.3 — 2023-08-15
- 3.2.0-rc.2 — 2023-08-15
- 3.2.0-alpha.2 — 2023-08-14
- 3.2.0-rc.1 — 2023-08-09
- 3.2.0-alpha.1 — 2023-08-04
- 3.1.5 — 2023-06-07
- 3.1.4 — 2023-06-07
- 3.1.4-rc.1 — 2023-06-07
- … 39 more at https://npm.io/package/use-long-press/versions

## README

# React Long Press Hook

[![codecov](https://codecov.io/gh/minwork/react/branch/main/graph/badge.svg?token=2KPMMSLDOM)](https://codecov.io/gh/minwork/react)
![npm type definitions](https://img.shields.io/npm/types/use-long-press)
![NPM Downloads](https://img.shields.io/npm/dm/use-long-press)
[![npm](https://img.shields.io/npm/v/use-long-press)](https://www.npmjs.com/package/use-long-press)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-long-press)

![React Long Press Hook](https://raw.githubusercontent.com/minwork/react/main/packages/use-long-press/images/react-long-press-hook.webp)

> React hook for detecting _click_ / _tap_ / _point_ and _hold_ event

# Main features
- Mouse, Touch and Pointer events support
- Pass custom context and access it in callback
- Cancel long press if moved too far from the target
- Flexible callbacks: `onStart`, `onMove`, `onFinish`, `onCancel`
- Disable hook when necessary
- Filter undesired events (like mouse right clicks)

# Installation
```shell
yarn add use-long-press
```
or
```shell
npm install --save use-long-press
```

# Basic usage
Basic hook usage example to get started immediately
```tsx
import React from 'react'; // No longer necessary in newer React versions
import { useLongPress } from 'use-long-press';

const Example = () => {
  const handlers = useLongPress(() => {
    // Your action here
    console.log('Long pressed!');
  });
  return <button {...handlers()}>Press me</button>;
};
```

# Documentation

- [Interactive documentation](https://react-libraries-storybook.vercel.app/) (Storybook)
- [Static documentation](https://minwork.gitbook.io/long-press-hook/) (Gitbook)

# Support

If you like my work, consider making a [donation](https://github.com/sponsors/minwork) through Github Sponsors.

# License

MIT © [minwork](https://github.com/minwork)

---
_Source: https://npm.io/package/use-long-press · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._