react-use-move

React hook for move interaction by pointer event.

Install

npm install react-use-move

Usage

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
• returns interface
• example

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
• returns interface

useMovePointState(options: MovePointStateOptions): MovePointStateResult

useMovePointState provides the simplest point move.

• options interface
• returns interface
• example