This is a utility to efficiently subscribe to window mouse events. As components in your application interact with mouse position, they compound mouse listeners which can be expensive to handle. To get around this, the useMouseInfo
hook reads context from the <MouseInfoProvider>
— which attaches only a single event listener to the window. These events are also piped through requestAnimationFrame
so they are already optimized for performance.
This utility also conveniently interprets mouse data for you, such as direction of mouse movement and percentage within viewport.
requestAnimationFrame
Move your cursor to see the effect:
{
"x": 0,
"y": 0,
"xDifference": 0,
"yDifference": 0,
"xPercentage": 0,
"yPercentage": 0,
"totalPercentage": 0,
"eventsFired": 0
}