Skip to content

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

Notifications You must be signed in to change notification settings

bennettdams/use-mouse-distance

Repository files navigation

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)

use-mouse-distance example

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)

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published