@use-gesture/core

What is @use-gesture/core?

@use-gesture/core is a library for handling gestures in React applications. It provides a set of hooks that allow you to easily add gesture recognition to your components, such as drag, pinch, scroll, wheel, and more.

What are @use-gesture/core's main functionalities?

Drag

This code sample demonstrates how to use the `useDrag` hook to make a component draggable. The `useDrag` hook provides the necessary bindings to track the drag state and update the component's position accordingly.

```jsx
import { useDrag } from '@use-gesture/react';
import { useState } from 'react';

function Draggable() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const bind = useDrag((state) => {
    setPosition({ x: state.offset[0], y: state.offset[1] });
  });

  return (
    <div
      {...bind()}
      style={{
        transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
        width: 100,
        height: 100,
        background: 'lightblue',
      }}
    />
  );
}
```

Pinch

This code sample demonstrates how to use the `usePinch` hook to make a component pinchable. The `usePinch` hook provides the necessary bindings to track the pinch state and update the component's scale accordingly.

```jsx
import { usePinch } from '@use-gesture/react';
import { useState } from 'react';

function Pinchable() {
  const [scale, setScale] = useState(1);
  const bind = usePinch((state) => {
    setScale(state.offset[0]);
  });

  return (
    <div
      {...bind()}
      style={{
        transform: `scale(${scale})`,
        width: 100,
        height: 100,
        background: 'lightcoral',
      }}
    />
  );
}
```

Scroll

This code sample demonstrates how to use the `useScroll` hook to handle scroll events. The `useScroll` hook provides the necessary bindings to track the scroll state and update the component's scroll position accordingly.

```jsx
import { useScroll } from '@use-gesture/react';
import { useState } from 'react';

function Scrollable() {
  const [scroll, setScroll] = useState({ x: 0, y: 0 });
  const bind = useScroll((state) => {
    setScroll({ x: state.offset[0], y: state.offset[1] });
  });

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

Other packages similar to @use-gesture/core

react-use-gesture

react-use-gesture is a library similar to @use-gesture/core that provides hooks for handling gestures in React applications. It offers a similar API and functionality, making it a good alternative for gesture recognition in React.

react-draggable

react-draggable is a library focused on making elements draggable in React applications. While it does not offer the full range of gesture recognition provided by @use-gesture/core, it is a robust solution for drag-and-drop functionality.

react-spring

react-spring is a library for animating React components. It can be used in conjunction with gesture libraries like @use-gesture/core to create smooth, animated interactions. While it is not a gesture library itself, it complements gesture handling by providing powerful animation capabilities.

README

The README file is missing