react-use-gesture

What is react-use-gesture?

react-use-gesture is a React hook library that allows you to handle gestures in your React applications. It provides a simple and declarative way to manage complex gesture interactions such as dragging, pinching, and scrolling.

What are react-use-gesture's main functionalities?

Drag

The `useDrag` hook allows you to handle drag gestures. In this example, the `bind` function is used to attach the drag event to a `div` element. The `offset` property provides the current position of the dragged element.

```jsx
import React from 'react';
import { useDrag } from 'react-use-gesture';

function Draggable() {
  const bind = useDrag(({ offset: [x, y] }) => {
    console.log(`Dragged to: ${x}, ${y}`);
  });

  return <div {...bind()} style={{ width: 100, height: 100, background: 'lightblue' }}>Drag me</div>;
}

export default Draggable;
```

Pinch

The `usePinch` hook allows you to handle pinch gestures. In this example, the `bind` function is used to attach the pinch event to a `div` element. The `offset` property provides the current distance and angle of the pinch gesture.

```jsx
import React from 'react';
import { usePinch } from 'react-use-gesture';

function Pinchable() {
  const bind = usePinch(({ offset: [d, a] }) => {
    console.log(`Pinched to: ${d}, ${a}`);
  });

  return <div {...bind()} style={{ width: 100, height: 100, background: 'lightgreen' }}>Pinch me</div>;
}

export default Pinchable;
```

Scroll

The `useScroll` hook allows you to handle scroll gestures. In this example, the `bind` function is used to attach the scroll event to a `div` element. The `offset` property provides the current scroll position.

```jsx
import React from 'react';
import { useScroll } from 'react-use-gesture';

function Scrollable() {
  const bind = useScroll(({ offset: [x, y] }) => {
    console.log(`Scrolled to: ${x}, ${y}`);
  });

  return <div {...bind()} style={{ width: 200, height: 200, overflow: 'scroll', background: 'lightcoral' }}>
    <div style={{ width: 400, height: 400 }}>Scroll me</div>
  </div>;
}

export default Scrollable;
```

Other packages similar to react-use-gesture

react-dnd

react-dnd is a set of React utilities to help you build complex drag-and-drop interfaces while keeping your components decoupled. It is more focused on drag-and-drop interactions and provides a higher level of abstraction compared to react-use-gesture.

react-spring

react-spring is a spring-physics-based animation library for React applications. While it is primarily an animation library, it can be used in conjunction with gesture libraries to create smooth and interactive animations. It complements react-use-gesture well but serves a different primary purpose.

react-interactions

react-interactions is a library for handling user interactions in React applications. It provides a set of hooks for managing various types of interactions, including gestures. It is similar to react-use-gesture but offers a broader range of interaction handling.

README

React UseGesture

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

#Yarn
yarn add react-use-gesture

#NPM
npm install react-use-gesture

Full documentation website

• Available Hooks
• Gesture State
• Gesture Options
• Utilities
• FAQ

Simple example

import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

function PullRelease() {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))

  // Set the drag hook and define component movement based on gesture data
  const bind = useDrag(({ down, movement: [mx, my] }) => {
    set({ x: down ? mx : 0, y: down ? my : 0 })
  })

  // Bind it to a component
  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

More on the full documentation website...