# react-use-move

> React hook for move interaction by pointer event

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

## Install

```sh
npm install react-use-move
pnpm add react-use-move
yarn add react-use-move
bun add react-use-move
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2025-03-16 |
| First published | 2022-03-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 38 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ofk |
| Maintainers | ofk |

## Links

- npm: https://www.npmjs.com/package/react-use-move
- Repository: https://github.com/ofk/react-use-move
- Homepage: https://github.com/ofk/react-use-move#readme
- Issues: https://github.com/ofk/react-use-move/issues
- npm.io page: https://npm.io/package/react-use-move

## Recent versions

- 1.4.0 (latest) — 2025-03-16
- 1.3.0 — 2023-06-23
- 1.2.0 — 2022-12-09
- 1.1.0 — 2022-06-23
- 1.0.0 — 2022-03-22

## README

# react-use-move

React hook for move interaction by pointer event.

## Install

```sh
npm install react-use-move
```

## Usage

```jsx
import React from 'react';
import { useMove } from 'react-use-move';

const Example = () => {
  const [point, setPoint] = useState({ x: 0, y: 0 });
  const { moveProps } = useMove({
    onMove(_evt, { movementX, movementY }) {
      setPoint(({ x, y }) => ({ x: x + movementX, y: y + movementY }));
    },
  });
  return (
    <div
      style={{
        position: 'absolute',
        top: `${point.y}px`,
        left: `${point.x}px`,
      }}
      {...moveProps}
    >
      move
    </div>
  );
};
```

## API

### `useMove(options: MoveOptions): MoveProps`

`useMove` handles move interactions by pointer events.

- [options interface](src/useMove.ts#:~:text=interface%20MoveOptions)
- [returns interface](src/useMove.ts#:~:text=interface%20MoveResult)
- [example](examples/components/UseMoveExamples.tsx)

### `useMoveData(options: MoveDataOptions): MoveDataResult`

`useMoveData` creates a `useMove` option tied to the data. For example, you can easily create a drag operation tied to CSS top, left.

- [options interface](src/useMoveData.ts#:~:text=interface%20MoveDataOptions)
- [returns interface](src/useMoveData.ts#:~:text=interface%20MoveDataResult)

### `useMovePointState(options: MovePointStateOptions): MovePointStateResult`

`useMovePointState` provides the simplest point move.

- [options interface](src/useMovePointState.ts#:~:text=interface%20MovePointStateOptions)
- [returns interface](src/useMovePointState.ts#:~:text=interface%20MovePointStateResult)
- [example](examples/components/UseMovePointStateExamples.tsx)

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