ahmadmhawwash / scroll-sync-react Goto Github PK
View Code? Open in Web Editor NEWA scroll syncing library for react that is up to date
License: MIT License
A scroll syncing library for react that is up to date
License: MIT License
@AhmadMHawwash Thank you so much for this amazing package. Just wanted to point one issue I had using it.
When I have two DIVs, like a menu and the content, and want to sync the scroll vertically between the two but I still want to scroll horizontally the content, everything works. But, when I have then content horizontally scrolled and scroll either the menu or the content DIV vertically, the content horizontal scroll goes back to the start.
Explaining may sound confusing, so I made this gif:
And here is the sandbox with the code.
It looks like you are using fixed dependencies for react and react-dom which makes it impossible to use with newer versions of react 16.x. Please use a version range.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"16.13.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.12.0" from [email protected]
npm ERR! node_modules/scroll-sync-react
npm ERR! scroll-sync-react@"1.1.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Hello, guys !
First of all, congrats for this component!
Do you have plans to create TS types on @types/react-scroll-sync?
I am trying to use this library with react-window
to align a "sticky" header/row however because of the way react-window
is working under the hood with the FixedSizeList
, you have to wrap it in a div and this is the incorrect ref.
You can see a sandbox link here.
Here is a commented sec
<ScrollSyncNode group="a">
<div> {/* ref in ScrollSync is made to this element*/}
<List // But this creates a `div` that is the actual element we want to have a ref of
className="List"
height={75}
itemCount={50}
itemSize={100}
layout="horizontal"
width={300}
>
{Column}
</List>
</div>
</ScrollSyncNode>
I tried removing the wrapping div, but I get a e.persist()
is not a function, I assume this is because the ref is not passed down properly internally by react-window
.
Is it possible to allow us to pass an as
or component
option prop for ScrollSyncNode
that would take a forwardRef
instance so we can pass the proper ref to ScrollSync
?
I have tried using the outerElementType
and innerElementType
props for react-window
components and rendering a ScrollSyncNode
but same problem, since ScrollSyncNode
clones it's children (ref won't be passed?) this creates weird side effects.
Any ideas? Also, nice library, much better than the unmaintained version and first class typescript support is always a welcome sight!
Hello @AhmadMHawwash and thank you for this great library!
The scroll syncing has been working great, but I noticed a small problem with how the library handles the ref
prop.
I want to set the position of my scrollable div, so I'm using the ref
prop to get a reference to the element:
<ScrollSyncNode>
<div className={styles.scroller} ref={myRef}>
...
</div>
</ScrollSyncNode>
This does not however work, because the library creates its own ref
that it assigns to the direct child, overwriting the one that I have given (myRef
).
One way to fix that would be to use the already existing ref
from the children
property if it exists, and create new one only if it does not exist. e.g.
-const ref = useRef<EventTarget & HTMLElement>(null);
+const ref = chilren.ref || useRef<EventTarget & HTMLElement>(null);
I can create a Pull Request for that change if it makes sense.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.