JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17581
  • Score
    100M100P100Q145557F
  • License MIT

A React hook for tracking the position of the mouse as it moves around an element.

Package Exports

  • @react-hook/mouse-position

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-hook/mouse-position) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useMousePosition()

Bundlephobia Types NPM Version MIT License 

npm i @react-hook/mouse-position

A React hook for tracking the position of the mouse as it moves around an element. This hook also provides an interop between touch and desktop devices and will treat ontouch events the same as onmouse ones.

Quick Start

import useMousePosition from '@react-hook/mouse-position'

const Component = props => {
  const [mousePosition, ref] = useMousePosition(
    0, // enterDelay
    0, // leaveDelay
    30 // fps
  )

  return (
    <div ref={ref}>
      Hover me and see where I am relative to the element:
      <br />
      x: ${mousePosition.x}
      y: ${mousePosition.y}
    </div>
  )
}

API

useMousePosition(enterDelay?: number, leaveDelay?: number, fps?: number)

Arguments

Argument Type Default Description
enterDelay number 0 The amount of time in ms to wait after an initial action before setting mousemove events to state
leaveDelay number 0 The amount of time in ms to wait after a final action before setting mouseleave events to state
fps number 30 The rate in frames-per-second that the state should update

Returns [state: MousePosition, ref: (element: HTMLElement) => void]

Variable Description
state The mouse position data for the ref'd element
ref The callback ref you must provide to the element you want to track mouse data position of

state: MousePosition

Key Type Default Description
x number null Mouse position relative to the left edge of the element, null if mouse is not over the element
y number null Mouse position relative to the top edge of the element, null if mouse is not over the element
pageX number null Mouse position relative to the left edge of the document, null if mouse is not over the element
pageY number null Mouse position relative to the top edge of the document, null if mouse is not over the element
clientX number null Mouse position relative to the left edge of the client, null if mouse is not over the element
clientY number null Mouse position relative to the top edge of the client, null if mouse is not over the element
screenX number null Mouse position relative to the left edge of the screen, null if mouse is not over the element
screenY number null Mouse position relative to the top edge of the screen, null if mouse is not over the element
elementWidth number null DOMRect.width of the element, null if mouse is not over the element
elementHeight number null DOMRect.height of the element, null if mouse is not over the element
isOver boolean false true if the mouse is currently hovering over the element
isDown boolean false true if the mouse is currently hovering over the element AND is down

LICENSE

MIT