npmpackage.info

react-use-gesture

👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.

9.1.3

9,199

MIT

TypeScript

8.88 kB

41,602,500 2.6

Installations

npm install react-use-gesture

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.18.4

NPM Version

7.5.4 Pull Requests

Open

5

Total

206

Closed

30

Merged

171

Issues

Open

38

Total

334

Closed

296

Releases

140

@use-gesture/vanilla@10.3.1

Published on 21 Mar 2024

@use-gesture/react@10.3.1

Published on 21 Mar 2024

@use-gesture/core@10.3.1

Published on 21 Mar 2024

@use-gesture/vanilla@10.3.0

Published on 16 Sept 2023

@use-gesture/react@10.3.0

Published on 16 Sept 2023

@use-gesture/core@10.3.0

Published on 16 Sept 2023

View all 140 releases

Contributors

Unable to fetch Contributors

View all 93 contributors

Languages

TypeScript

JavaScript

Shell

TypeScript (98.85%)

JavaScript (1.11%)

Shell (0.04%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

pmndrs

Download Statistics

Total Downloads

41,602,500

Last Day

40,223

Last Week

172,226

Last Month

775,275

Last Year

11,024,866

GitHub Statistics

9,199 Stars

1,360 Commits

311 Forks

43 Watching

11 Branches

93 Contributors

Bundle Size

31.58 kB

Minified

8.88 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

9.1.3

Package Id

react-use-gesture@9.1.3

Size

260.11 kB

NPM Version

7.5.4

Node Version

12.18.4

Publised On

07 Mar 2021

Total Downloads

Cumulative downloads

Total Downloads

41,602,500

Last day

3.6%

40,223

Compared to previous day

Last week

-11.3%

172,226

Compared to previous week

Last month

1.3%

775,275

Compared to previous month

Last year

0.9%

11,024,866

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React UseGesture

npm bundle size NPM Travis (.org) branch

React UseGesture is a hook that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.

You can use it stand-alone, but to make the most of it you should combine it with an animation library like react-spring, though you can most certainly use any other.

The demos are real click them!

Installation

1#Yarn
2yarn add react-use-gesture
3
4#NPM
5npm install react-use-gesture

Full documentation website

Simple example

1import { useSpring, animated } from 'react-spring'
2import { useDrag } from 'react-use-gesture'
3
4function PullRelease() {
5  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
6
7  // Set the drag hook and define component movement based on gesture data
8  const bind = useDrag(({ down, movement: [mx, my] }) => {
9    set({ x: down ? mx : 0, y: down ? my : 0 })
10  })
11
12  // Bind it to a component
13  return <animated.div {...bind()} style={{ x, y, touchAction: 'none' }} />

The example above makes a div draggable so that it follows your mouse on drag, and returns to its initial position on release.

Make sure you always set touchAction on a draggable element to prevent glitches with the browser native scrolling on touch devices.

Available hooks

React-use-gesture exports several hooks that can handle different gestures:

Hook	Description
`useDrag`	Handles the drag gesture
`useMove`	Handles mouse move events
`useHover`	Handles mouse enter and mouse leave events
`useScroll`	Handles scroll events
`useWheel`	Handles wheel events
`usePinch`	Handles the pinch gesture
`useGesture`	Handles multiple gestures in one hook

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/documentation.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/documentation.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/documentation.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/documentation.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/documentation.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/documentation.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/documentation.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/documentation.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/use-gesture/release.yml/main?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 7 third-party GitHubAction dependencies pinned

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

53 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg
Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-wm7h-9275-46v2
Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-vm32-9rqf-rh3r
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-m95q-7qp3-xv42

Score

2.6

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-use-gesture

@use-gesture/react

10.3.1

React target for @use-gesture

@use-gesture/vanilla

10.3.1

Vanilla target for @use-gesture

dd-use-gesture-react

1.0.2

React target for @use-gesture

react-spring-bottom-sheet

3.4.1

✨ Accessible, 🪄 Delightful, and 🤯 Performant. Built on react-spring for the web, and react-use-gesture.

react-use-gesture

Installations

Developer Guide

No

CommonJS

12.18.4

7.5.4

Pull Requests

5

206

30

171

Issues

38

334

296

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

31.58 kB

8.88 kB

Maintainers

Package Meta Information

Total Downloads

41,602,500

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React UseGesture

Installation

Full documentation website

Simple example

Available hooks

More on the full documentation website...

10

10

10

1

0

0

0

0

0

0

0

0

0

2.6

/10

Other packages similar to react-use-gesture