use-mouse-distance
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

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)

Package Sidebar

Install

npm i use-mouse-distance

Weekly Downloads

47

Version

0.0.9

License

ISC

Unpacked Size

36 kB

Total Files

18

Last publish

Collaborators

  • bennettdams