react-use-mouse-move
Installation
This is a pluggable custom hook for React 16.8+.
$ npm install react-use-mouse-move
About
Provides a reusable custom React hook for tracking mouse movement either by attaching to the window or a targetted element ID.
Usage
Hook expects
- throttle: integer 1 - 10 that controls how often the hook "updates" the given position. Limiting this can be helpful for performance reasons.
- targetPos: string representing what x, y coordinate you want from the event, ex:
['page', 'screen', 'offset', 'client', '']
. By default returns x and y. (See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) - targetId: string representing target ID of element you wish to track. (Defaults to window)
Additionally, the returned object also includes the following keyDown states: ['altKey', 'ctrlKey', 'metaKey', 'shiftKey']
. Below is the full object returned from an mouse move update.
x y keydown: altKey ctrlKey metaKey shiftKey
In a component
;; const TestHook = { const pos1 = ; const pos2 = ; const pos3 = ; const pos4 = ; return <div id="myDiv"> <h2>Throttle </h2> <span>x: pos1x y: pos1y</span> <br/> <h2>Throttle 2</h2> <span>x: pos2x y: pos2y</span> <br/> <h2>Throttle 5</h2> <span>x: pos3x y: pos3y</span> <h2>Throttle </h2> <span>x: pos4x y: pos4y</span> </div> ;} ;
Todos
- tests
License
MIT