React hook for mouse position, movement and buttion states, now with Typescript support
npm install react-typescript-hook-mouse
A React hook to access data from mouse events. Now with typescript types!
         
Using npm:
``sh`
npm install --save react-typescript-hook-mouse
Using yarn:
`sh`
yarn add react-typescript-hook-mouse
`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 (
}}}}$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.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.
LGPL-3.0