react-typescript-hook-mouse :mouse:


A React hook to access data from mouse events. Now with typescript types!

         

Installation

Using npm:

``sh
npm install --save react-typescript-hook-mouse
`

Using yarn:

`sh
yarn add react-typescript-hook-mouse
`

Usage

`jsx
import React from 'react';
import useMouse from 'react-typescript-hook-mouse';

export default () => {
const mouse = useMouse();

if (!mouse) {
return Awaiting first mouse event...;
}

return (




• 
Mouse position in viewport:
{(${String(mouse.position.client.x)}, ${String(mouse.position.client.y)})}



• 
Mouse position on page:
{(${String(mouse.position.page.x)}, ${String(mouse.position.page.y)})}



• 
Mouse position on screen:
{(${String(mouse.position.screen.x)}, ${String(mouse.position.screen.y)})}



• 
Mouse movement:
{(${String(mouse.movement.x)}, ${String(mouse.movement.y)})}



• 
  Left button was pressed:
  {String(mouse.buttons.left)}
  


• 
  Right button was pressed:
  {String(mouse.buttons.right)}
  


• 
  Middle button was pressed:
  {String(mouse.buttons.middle)}
  


• 
  Alt key was pressed:
  {String(mouse.keyboard.alt)}
  


• 
  Ctrl key was pressed:
  {String(mouse.keyboard.ctrl)}
  


• 
  Meta key was pressed:
  {String(mouse.keyboard.meta)}
  


• 
  Shift key was pressed:
  {String(mouse.keyboard.shift)}
  


• 
  Wheel delta X:
  {String(mouse.wheel.deltaX)}
  


• 
  Wheel moved left:
  {String(mouse.wheel.left)}
  


• 
  Wheel moved right:
  {String(mouse.wheel.right)}
  


• 
  Wheel delta Y:
  {String(mouse.wheel.deltaY)}
  


• 
  Wheel moved up:
  {String(mouse.wheel.up)}
  


• 
  Wheel moved down:
  {String(mouse.wheel.down)}
  


• 
  Wheel delta Z:
  {String(mouse.wheel.deltaZ)}
  


• 
  Wheel moved out:
  {String(mouse.wheel.out)}
  


• 
  Wheel moved in:
  {String(mouse.wheel.in)}
  


);
};
`

$3

You can specify which events you want to watch. By default, the hook watches all the events it knows about (mousedown, mouseup, mousemove, and wheel), but this behavior can be changed by passing a configuration object:
`jsx
// Use defaults.
const mouseAllEvents = useMouse();

// Exactly the same as above.
const mouseAllEventsExplicit = useMouse({
mousedown: true,
mouseup: true,
mousemove: true,
wheel: true,
});

// Only watch for click events, don't watch movements or wheel events.
const mouseButtonEvents = useMouse({
mousedown: true,
mouseup: true,
mousemove: false,
wheel: false,
});

// Exactly the same as the above.
// Event names not given are assumed to be false.
const mouseButtonEventsImplicit = useMouse({
mousedown: true,
mouseup: true,
});

// Dynamically register the movement listener,
// based on the input boolean value.
// Does not watch the wheel event.
const mouseEventsDynamic = useMouse({
mousedown: true,
mouseup: true,
mousemove: someVariableMaybeFromAnotherHook,
});
`

The hook is smart enough to dynamically change the registrations to only watch for the events you want, so you can update the values in the configuration object at runtime and it will react to alter the event listeners.

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

Based from the react-hook-mouse package by Bence A. Toth .

Contributions are welcome. File bug reports, create pull requests, feel free to reach out on the project github page, or via email.

Licence

LGPL-3.0