/react-tiny-autoscroll

Automatically scrolls the element when the cursor approaches the boundaries.

Primary LanguageTypeScriptMIT LicenseMIT

react-tiny-autoscroll

npm version npm downloads npm size commit activity license

Automatically scrolls the element when the cursor approaches the boundaries.

Demo

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 container
  • skip - lets you disable/enable the scrolling
  • threshold - distance to boundaries where scrolling will start
  • maxSpeed - maximum number of pixels allowed to scroll in 10ms