#Mouse Info

Name: @faceless-ui/mouse-info
Latest:

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.

#Key features

  • Attaches single mouse-related event listeners to the window for your entire app
  • Throttles these events through requestAnimationFrame
  • Provides critical information about the current mouse position

Move your cursor to see the effect:

{
  "x": 0,
  "y": 0,
  "xDifference": 0,
  "yDifference": 0,
  "xPercentage": 0,
  "yPercentage": 0,
  "totalPercentage": 0,
  "eventsFired": 0
}