useMousePosition

useMousePosition tracks the current position of the mouse within the browser window. It provides a simple interface for accessing the x and y coordinates of the mouse cursor in pixels.

Installation

1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

2. Import useWindowSize into your component.

import { useMousePosition } from '@ridgehkr/useful'

Usage

The useMousePosition hook doesn't take any parameters. It returns an object with the current width and height in pixels of the browser window. The following is a basic example that displays the current window size:

import { useMousePosition } from '@ridgehkr/useful'
 
function MouseTracker() {
  const { x, y } = useMousePosition()
 
  return (
    <div>
      <p>X: {x}</p>
      <p>Y: {y}</p>
    </div>
  )
}

API Reference

Hook Signature

useMousePosition(): MousePosition

Parameters

useMousePosition does not accept any parameters.

Return Value

The hook returns a MousePosition object with the following properties: