https://github.com/ahmadmhawwash/scroll-sync-react
A scroll syncing library for react that is up to date
https://github.com/ahmadmhawwash/scroll-sync-react
context-api react reactjs scroll scrolling scrollsync sync syncscroll
Last synced: 7 months ago
JSON representation
A scroll syncing library for react that is up to date
- Host: GitHub
- URL: https://github.com/ahmadmhawwash/scroll-sync-react
- Owner: AhmadMHawwash
- License: mit
- Created: 2019-12-12T20:32:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-19T05:01:31.000Z (almost 2 years ago)
- Last Synced: 2025-08-27T01:09:20.949Z (7 months ago)
- Topics: context-api, react, reactjs, scroll, scrolling, scrollsync, sync, syncscroll
- Language: TypeScript
- Homepage:
- Size: 42.8 MB
- Stars: 56
- Watchers: 1
- Forks: 6
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# scroll-sync-react
## Overview
We provide you with a React.Context.Provider (``) Component that you wrap your "context" with, and then wrap each of your scrollable elements with a scroll listner (``)
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 = () =>
This is group `a`
Scrollable things
This is group `a`
Scrollable things
```
## 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:
- [x] Vertical scrolling sync
- [x] Providing a codesandbox
- [x] Configure scroll sync via `scroll` prop
- [x] Horizontal scrolling sync
- [x] Lock axis (locking horizontal or vertical of ScrollSyncNode)
- [x] Adding `onScroll` node callback
- [x] Providing tests