react-tiny-autoscroll
Automatically scrolls the element when the cursor approaches the boundaries.
Mostly helpful when used in combination with drag and drop-like components which do not support scrollable containers.
Install via npm
npm install react-tiny-autoscroll
or
yarn add react-tiny-autoscroll
Usage
const containerRef = useRef();
useAutoScroll({
containerRef,
});
// Making our container scrollable
const style: CSSProperties = {
height: 400,
overflowY: "auto",
border: "1px solid red",
};
return (
<div ref={containerRef} style={style}>
{items.map((n) => (
<Item key={n} />
)}
</div>
);
API
containerRef - reference to the scrollable containerskip - lets you disable/enable the scrollingthreshold - distance to boundaries where scrolling will startmaxSpeed - maximum number of pixels allowed to scroll in 10ms
