Child's ref gets replaced by the reference from the library

[Krister Kari]

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!

[Hawwash]

Hello @kristerkari,

Thanks for opening this up, sure it's a case that should be solved, good catch 👍🏽
Can you please open up a PR? (side note: you might need to forwardRef)

Thanks 🙏

[Krister Kari]

@AhmadMHawwash Sure, I'll open a PR.

I also noticed that the same overwriting of props happens to the onScroll and onWheel events when used on the child element. That should also be quite easy to fix: just add a call in the library's onScroll and onWheel handlers to those props from the child if they are a typeof === "function".