useMouseMove documentation

The useMouseMove hook is a custom React hook that allows you to track the mouse position within a component.

Type

Hooks

import

import { useMouseMove } from '@pillar-ui/hooks'
Go To use-mouse-move Source CodeIssuesdiscussions

Table of Contents

Why useMouseMove

The useMouseMove hook provides an easy way to track the mouse position within a React component. It returns the current mouse position and an event handler to update the position when the mouse moves.

Installation

To use the useMouseMove hook, simply import it into your React component:

import { useMouseMove } from '@pillar-ui/hooks'

Returned Values

The useMouseMove hook returns an object with the following properties and methods:

  • position: MousePosition: An object with x and y properties representing the current mouse coordinates.
  • onMouseMove: (event: MouseEvent) => void: An event handler to update the mouse position when the mouse moves.

Usage

To use the useMouseMove hook, call it inside your functional component:

import { useMouseMove } from '@pillar-ui/hooks'

function MyComponent() {
  const { position, onMouseMove } = useMouseMove()

  return (
    <div onMouseMove={onMouseMove}>
      {' '}
      Mouse position: {position.x}, {position.y}{' '}
    </div>
  )
}

In the example above, the useMouseMove hook is used to track and display the current mouse position in the component. The position property holds the current coordinates with x and y properties, while the onMouseMove event handler updates the position when the mouse moves.

Implementation details

The useMouseMove hook uses the useState hook from React to manage the state of the mouse position. It updates the position by attaching the onMouseMove event handler to the component using the onMouseMove prop.

TypeScript Support

The useMouseMove hook has built-in TypeScript support and includes type definitions for the returned values.

Conclusion

The useMouseMove hook is a convenient way to track the mouse position within a React component. Whether you need to display the position or perform other actions based on the mouse movement, this hook provides a simple and straightforward solution.