bence-toth / react-hook-mouse

A React hook to access mouse position, movement and button states

react-hook-mouse 🐭

A React hook to access data from mouse events.

Installation

Using npm:

npm install --save react-hook-mouse

Using yarn:

yarn add react-hook-mouse

Usage

import React from 'react'
import useMouse from 'react-hook-mouse'

const displayCoordinates = ({x, y}) => `${x} : ${y}`

const displayFlag = flag => flag ? 'Yes' : 'No'

const ComponentWithMouse = () => {
  const mouse = useMouse()

  return (
    <ul>
      <li>
        Mouse position in viewport:
        {displayCoordinates(mouse.position.client)}
      </li>
      <li>
        Mouse position on page:
        {displayCoordinates(mouse.position.page)}
      </li>
      <li>
        Mouse position on screen:
        {displayCoordinates(mouse.position.screen)}
      </li>
      <li>
        Mouse movement:
        {displayCoordinates(mouse.movement)}
      </li>
      <li>
        Left button was pressed:
        {displayFlag(mouse.buttons.left)}
      </li>
      <li>
        Right button was pressed:
        {displayFlag(mouse.buttons.right)}
      </li>
      <li>
        Middle button was pressed:
        {displayFlag(mouse.buttons.middle)}
      </li>
      <li>
        Alt key was pressed:
        {displayFlag(mouse.keyboard.alt)}
      </li>
      <li>
        Ctrl key was pressed:
        {displayFlag(mouse.keyboard.ctrl)}
      </li>
      <li>
        Meta key was pressed:
        {displayFlag(mouse.keyboard.meta)}
      </li>
      <li>
        Shift key was pressed:
        {displayFlag(mouse.keyboard.shift)}
      </li>
    </ul>
  )
}

Caveats

Data in mouse.keyboard is always read from a MouseEvent and therefore it will only get updated on mouse events, not when the keys are actually pressed on the keyboard.

Contributions

Contributions are welcome. File bug reports, create pull requests, feel free to reach out at [email protected].

Licence

LGPL-3.0

react-hook-mouse's Issues

Rename master branch to main

Update dependencies

Operability improvements

• Update dev dependencies
• Add ESLint (+rule sets) and prettier to dev dependencies
• Add npm scripts to run prettier and eslint
• Create GH Actions workflow to run build, linter, and prettier

Add ambient types for TypeScript

Untrack and remove package lock file

Add tests

Relicense under MIT

Upgrade peerDependencies to allow React 17+

Add React to peer dependencies and update dependencies

Add boilerplate from Create React Thing

Upgrade peerDependencies to allow React 18.x