1.0.0 • Published 2 years ago
@roligheten/scroll-sync-react v1.0.0
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
prop | type | required | default | description |
---|---|---|---|---|
children | ReactElement | true | wrapper of to-be-synced elements | |
disabled | boolean | false | false | whether syncing is enabled or not |
proportional | boolean | false | true | In case we want scroll to be proportionally applied regardless of the width and/or height |
ScrollSyncNode
prop | type | required | default | description |
---|---|---|---|---|
children | ReactElement | true | scrollable element | |
group | string | false | "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 ScrollSyncNode s |
selfLockAxis | "X", "Y", "XY" or null | false | null | to specifiy current node scroll lock axis |
onScroll | (event) => void | false | ()=>{} | on Node Scroll callback |
gify example!
A photo equals a thousand word, how about a GIF!
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
1.0.0
2 years ago