1.0.0 • Published 2 years ago

@roligheten/scroll-sync-react v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

scroll-sync-react

Overview

We provide you with a React.Context.Provider (<ScrollSync/>) Component that you wrap your "context" with, and then wrap each of your scrollable elements with a scroll listner (<ScrollSyncNode/>) And see the magic happen

Note

I needed this type of functionality on a side project, so I researched and found this library https://github.com/okonet/react-scroll-sync

I have so much similarity with this library, but it's not maintained anymore, and uses the legacy context api, which introduced unexpected bugs, so I re-implemented it with the new context API and using react-hooks

codesandbox

A codesandbox that utilizes the latest of this package https://codesandbox.io/s/gallant-sky-joiou

Installation

npm i scroll-sync-react --save

Usage

import { ScrollSync, ScrollSyncNode } from './build';

const App = () =>
  <ScrollSync>
    <div style={{ display: 'flex', position: 'relative', height: 300 }}>
      <ScrollSyncNode group="a">
        <div style={{ overflow: 'auto' }}>
          <section style={{ height: 1000 }}>
            <h1>This is group `a`</h1>
            Scrollable things
          </section>
        </div>
      </ScrollSyncNode>
      <ScrollSyncNode group="a">
        <div style={{ overflow: 'auto' }}>
          <section style={{ height: 1000 }}>
            <h1>This is group `a`</h1>
            Scrollable things
          </section>
        </div>
      </ScrollSyncNode>
    </div>
  </ScrollSync>

API

ScrollSync

proptyperequireddefaultdescription
childrenReactElementtruewrapper of to-be-synced elements
disabledbooleanfalsefalsewhether syncing is enabled or not
proportionalbooleanfalsetrueIn case we want scroll to be proportionally applied regardless of the width and/or height

ScrollSyncNode

proptyperequireddefaultdescription
childrenReactElementtruescrollable element
groupstringfalse"default"the group of scollable elements this node will be synced with
scroll"two-way", "synced-only" or "syncer-only"false"two-way"to determine scroll configuration with other ScrollSyncNodes
selfLockAxis"X", "Y", "XY" or nullfalsenullto specifiy current node scroll lock axis
onScroll(event) => voidfalse()=>{}on Node Scroll callback

gify example!

A photo equals a thousand word, how about a GIF! example of syncing

Todo:

  • Vertical scrolling sync
  • Providing a codesandbox
  • Configure scroll sync via scroll prop
  • Horizontal scrolling sync
  • Lock axis (locking horizontal or vertical of ScrollSyncNode)
  • Adding onScroll node callback
  • Providing tests