React-use-sync-scroll NPM

useSyncScroll

A custom React hook for synchronized, proportional, horizontal and/or vertical DOM element scrolling.

Install

With npm:

npm install react-use-sync-scroll

Or with Yarn:

yarn add react-use-sync-scroll

Or in a browser:

<script scr="https://unpkg.com/react-use-sync-scroll/dist/index.js"></script>

Use

The hook accepts two arguments:

The number of elements to synchronize
An options object to define whether to synchronize horizontal or vertical scrolling (both default to false)

It returns an array of refs to assign to your elements. For example:

import useSyncScroll from 'react-use-sync-scroll';

function myComponent() {
  const refs = useSyncScroll(3, { vertical: true, horizontal: false });

  return (
    <div>
      <div ref={refs[0]}>...</div>
      <div ref={refs[1]}>...</div>
      <div ref={refs[2]}>...</div>
    </div>
  );
}

You can see a working example on this Codesandbox.