https://github.com/quisido/use-mouse-move

React hook for listening to mouse move events
https://github.com/quisido/use-mouse-move

Last synced: 17 days ago
JSON representation

React hook for listening to mouse move events

• Host: GitHub
• URL: https://github.com/quisido/use-mouse-move
• Owner: quisido
• License: mit
• Created: 2020-10-16T07:37:52.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-04-27T21:21:27.000Z (over 3 years ago)
• Last Synced: 2024-09-03T02:46:09.064Z (2 months ago)
• Language: TypeScript
• Size: 44.4 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useMouseMove [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Listen%20to%20mouse%20move%20events%20with%20a%20React%20hook.&url=https://github.com/CharlesStover/use-mouse-move&via=CharlesStover&hashtags=react,reactjs,javascript,typescript,webdev,webdevelopment) [![version](https://img.shields.io/npm/v/use-mouse-move.svg)](https://www.npmjs.com/package/use-mouse-move) [![minzipped size](https://img.shields.io/bundlephobia/minzip/use-mouse-move.svg)](https://www.npmjs.com/package/use-mouse-move) [![downloads](https://img.shields.io/npm/dt/use-mouse-move.svg)](https://www.npmjs.com/package/use-mouse-move) [![build](https://api.travis-ci.com/CharlesStover/use-mouse-move.svg)](https://travis-ci.com/CharlesStover/use-mouse-move/)

Listen to mouse move events with a React hook.

- [Install](#install)

- [Use](#use)

  - [Variants](#variants)

- [Sponsor](#sponsor)

## Install

- `npm install use-mouse-move` or

- `yarn add use-mouse-move`

## Use

```javascript

import useMouseMove from 'use-mouse-move';

function App() {

  const [x, y] = useMouseMove();

  return (

    


      Your mouse coordinates are {x}, {y}.

    

  );

}

```


### Variants

The `useMouseMove` hook accepts one parameter -- a `MouseMoveVariant` enum that

you can import from the `use-mouse-move` package. These variants coincide with

the different x/y coordinates emit by mouse move events.

```javascript

import useMouseMove, { MouseMoveVariant } from 'use-mouse-move';

useMouseMove(MouseMoveVariant.Default);

```

- `MouseMoveVariant.Default`: `x` and `y` (default if no variant is specified)

- `MouseMoveVariant.Client`: `clientX` and `clientY`

- `MouseMoveVariant.Movement`: `movementX` and `movementY` (relative movement)

- `MouseMoveVariant.Offset`: `offsetX` and `offsetY`

- `MouseMoveVariant.Page`: `pageX` and `pageY`

- `MouseMoveVariant.Screen`: `screenX` and `screenY`

## Sponsor 💗

If you are a fan of this project, you may

[become a sponsor](https://github.com/sponsors/CharlesStover)

via GitHub's Sponsors Program.