Skip to content

Latest commit

 

History

History
56 lines (42 loc) · 1.59 KB

README.md

File metadata and controls

56 lines (42 loc) · 1.59 KB

react-tiny-autoscroll

npm version npm downloads npm size commit activity license

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 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