use-mouse-distance 🐭📏

A React hook that measures the distance from an element's center to the user's mouse.

Installation

npm install use-mouse-distance

Example (CodeSandbox)

Usage

Use the hook to receive an element reference and the distance to that element's center.

import { useMouseDistance } from 'use-mouse-distance'

function MyComponent() {
  const { elementRef, distance, distanceX, distanceY } =
    useMouseDistance<HTMLDivElement>()

  return (
    <div>
      <div ref={elementRef}>
        <p>Distance sum (absolute): {distance}</p>
        <p>Distance x: {distanceX}</p>
        <p>Distance y: {distanceY}</p>
      </div>
    </div>
  )
}

API

Return field	Description
elementRef	Element reference
distance	Sum of the distance to the mouse (absolute number)
distanceX	Horizontal distance (can be negative)
distanceY	Vertical distance (can be negative)