Skip to main content

useScrollDevice()

The useScrollDevice() hook detects whether the user is scrolling with a mouse wheel or trackpad. Use this to adapt scroll behaviors or animations based on input device.

Import​

import { useScrollDevice } from 'react-haiku';

Usage​

Scroll Detection:

SCROLL TO DETECT
Mouse Wheel
Trackpad

Scroll vertically to detect input device

import { useScrollDevice } from 'react-haiku';

export const Component = () => {
  const device = useScrollDevice();

  return <p>Detected scroll device: {device || 'unknown'}</p>;
};

API​

Returns​

  • scrollDevice - Detected device type: "mouse", "trackpad", or null