use-ref-scroller

A react hook for scrolling to DOM elements

Only 599 bytes minified + g-zipped

Use case

You have a component which renders a DOM element you wish to be able to scroll to and you need a scrolling function to call

1import React from 'react';
2
3import useRefScroller from 'use-ref-scroller';
4
5function MyComponent() {
6  // using the hook without arguments will scroll the element to the center of the
7  // window's viewport
8  // alias elRef to myDiv for easier usage if having multiple elements
9  // in the same component
10
11  const { elRef: myDiv, scroll } = useRefScroller();
12
13  return (
14    <div>
15      <button onClick={scroll}>Scroll</button>
16
17      <div ref={myDiv}>
18        `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur, massa vitae consectetur egestas, justo magna
19        facilisis arcu, non accumsan lacus ipsum sit amet nisl.`
20      </div>
21    </div>
22  );
23}

Passing options to the hook

1interface ScrollOpts {
2  // Offset in percentage of the element's client dimentions
3  // default is to scroll to center the element in the scrolling pane, hence 50%
4  percentOfElement?: number;
5  //The offset in pixels, whch will be added to the percentage of the element
6  offsetPX?: number;
7  // Whether to run the scroll on mounting
8  onMount?: boolean;
9  // The scrollable container in which the ref element is scrolling
10  container?: any;
11  // default is the center of the scrolling container, hence 50%
12  percentOfContainer?: number;
13  // ScrollDirections.Vertical is the default setting, pass ScrollDirections.Horizontal to override it
14  direction?: ScrollDirections;
15}

Examples

1// scroll the element to the beginning of the screen horizontally
2const { elRef, scroll } = useRefScroller({ percentOfElement: 0, percentOfContainer: 0 });
3
4// scroll the center of the element to the center of the screen
5const { elRef, scroll } = useRefScroller();
6
7// scroll the element 200px from the bottom
8const { elRef, scroll } = useRefScroller({ offsetPx: -200, percentOfContainer: 100 });