use-mouse-distance v0.0.9

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