Description

Issue
I am encountering a TypeScript error when trying to use ScrollSync from react-scroll-sync in my Next.js project. The error states that ScrollSync's type FC is not a valid JSX element type.

Error Message

python

'ScrollSync' cannot be used as a JSX component.
  Its type 'FC<ScrollSyncProps>' is not a valid JSX element type.
    Type 'FunctionComponent<ScrollSyncProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/home/bicatalyst/src/profiler/nextjs/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(175, 9): 'children' is declared here.

Environment

Next.js version: 13.4.12
React version: 18.2.0
TypeScript version: 5.1.6
react-scroll-sync version: 0.11.0
@types/react-scroll-sync version: 0.8.7

Expected Behavior

ScrollSync should be usable as a JSX component without any TypeScript errors.

Actual Behavior

TypeScript throws an error indicating a type mismatch or incompatibility when using ScrollSync as a JSX component.

There should be a way of getting the refs of the scrollable elements used within the ScrollPanel elements.

I need to investigate why it is not possible, but I have tried with callbacks and regular refs. I assume that this is being kidnappted internally, to make the feature work.

Another thing that I have noticed is that after a while the scroll sync get chunky. I guess that is a certain point of time both elements start listening to each other at the same time, which makes the scroll chunky.

I will post more here during this week to enhance my findings, as I will need to reproduce this on public code.

Upon running npm install on my project:

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.5.4 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-scroll
npm ERR!   react-scroll@"^1.8.1" from the root project

First off, thank you for the nice library!

I have noticed what seems to be a bug: when a pane belongs to multiple groups and its scroll gets synchronized through one of these groups, then scrolling on it fails to synchronize the elements of its other groups.

This can be reproduced consistently on https://react-sync-scroll.netlify.app/#scrollsyncpane:

• scroll the blue table down
• then scroll the red table to the right

Expected: the black table header follows along and scrolls to the right.
Observed: the black table header remains still.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

nextjs : 13.5.6
lib: ^0.11.0

ReferenceError: Element is not defined
at Object. (/Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:854:71)
at webpack_require (/Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:30:30)
at Object. (/Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:883:23)
at webpack_require (/Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:30:30)
at /Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:76:18
at /Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:79:10
at webpackUniversalModuleDefinition (/Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:3:20)
at Object. (/Users//v3/frontend_next/node_modules/react-scroll-sync/dist/index.js:10:3)
at Module._compile (node:internal/modules/cjs/loader:1233:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at Module.require (node:internal/modules/cjs/loader:1115:19)
at mod.require (/Users/****/v3/frontend_next/node_modules/next/dist/server/require-hook.js:64:28)
at require (node:internal/modules/helpers:119:18) {

i can't inderstand the reason of this issue. it was working fine previously

How can I use ref on ScrollSyncPane child? It is always undefined. Maybe that's because ScrollSyncPane is cloning child in render function, passing childRef property, which is never set?

I have been using your package in nextjs 14. It is working fine using page router, but whenever I refactor my page router "file" to app router "file". I get the following error. I have tried

• Updating babel config with various packages
• I tried excluding, ignoring and overriding the node_modules/react-scroll-sync in babel config
• I tried transpiling the next config to ignore the node_modules/react-scroll-sync

I noticed that glitches occur when the scroll container (the element directly under ScrollSyncPane) is set to scroll-behavior: smooth in CSS (running in Chrome 102.0.5005).
The scroll position also jumps suddenly when used with scroll snapping.
Although I don't think any fix is needed, it might be helpful if a subtle explanation was added to README.

I have issue with three panes. Two of them shouldn't update horizontal or vertical position for another panes. But now when I'm scrolling horizontal pane, it passes vertical position 'scrollTop: 0' to other panes. I'm not sure if there is any way to do it with current implementation. If no - I can implement it.

I'm getting errors when my project builds:
warning "[email protected]" has incorrect peer dependency "[email protected] || 15.x". warning "[email protected]" has incorrect peer dependency "[email protected] || 15.x".

Another problem is that our project is using React and react-dom version 16.

It seems that with the new version i keep getting this warning

Pretty much the title. I have a component which does not have its own related context, and so unit testing is difficult since this.context.registerPane and this.context.unregisterPane aren't being mocked. Do I have to create a context for my component just to get the unit tests to work, or does react-scroll-sync have a way to handle this?

It would be great to have a way to get the scroll position of the scrollsyncpane, and possibly set the initial position from the parent component.

I am trying to use Sync for two tables created with https://devexpress.github.io/devextreme-reactive/docs/ but the sync doesn't works.
My code:
https://gist.github.com/deepak2431/ac8a33dec99f685a2c64f887b00df7b2
Thanks in advance!

componentWillReceiveProps is deprecated since React 16.3.0, use UNSAFE_componentWillReceiveProps instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Hello!

First of all, congratulation for this great component!

Do you have plans to add TS types to it on @types/react-scroll-sync?

When we upgraded to version 0.11.0 we (h/t @andyyu, the eng on our team who found the issue) noticed that some core app behavior changed and upon digging in, we discovered that it was related to changes in behavior around the attachTo prop. If no attachTo prop is provided, it will clone the children passed in and swap in a new ref (code).

We had code that relied on the fact that the refs would not be swapped out. The culprit PR is #76. Can you advise on how we should be using the API after this change to the behavior? If we want to avoid having children be cloned, how should we be utilizing the attachTo prop? From reading the code, it wasn't clear how to get the behavior we'd like.

Thanks in advance for the assistance!

It'd be handy to be able to pass a callback function that would be called every time the panes are sync. I have implemented this in a fork of my own and would be happy to open a PR if you're interested.

Something like

<ScrollSync onSync={() => console.log("Panes synchronized!")}>
  { /* ... some components including ScrollSyncPane */ }
</ScrollSync>

although we could discuss the name and signature of such function.

As in https://github.com/okonet/react-scroll-sync/blob/master/package.json#L5:

"main": "dist/index.js"

inside npm package this folder not present.

I found an error while executing an usage of a README.md. And I found what the problem is. It would be helpful to reflect this in the document.

import React, {Component} from 'react';
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';

export default class MyComponent extends Component {
    render() {
    return (
        <ScrollSync>
        <div style={{ display: 'flex', position: 'relative', height: 300 }}>
          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 500 }}>
                <h1>Left Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>
      
          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 1000 }}>
                <h1>Middle Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>
      
          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 2000 }}>
                <h1>Right Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>
        </div>
      </ScrollSync>
    )}
}

Return was missing, and it works normally when added return ( to the line 6.

prop-types  have been moved out of react for the very reason that it’s not mandatory in a React project …

If this module depends on it, it should be a regular dependency and not a peerDependency.

Why is ScrollSync using React.Children.only in its render method? It is a bit inconvenient and I cannot see a reason for it, although I may be missing something..

Using in Strict Mode, React give this two warnings:

index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: ScrollSync, ScrollSyncPane

and:

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of ScrollSyncPane which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

More details of the issues are available in React documentation: Link

Does this work with React-Native ?

Hi there!

Thanks so much @okonet for all your thoughts and work that went into this library. A few days ago I was searching for exactly what react-scroll-sync is doing and realized that there is no vanilla js version of it that is up-to-date enough for my taste.

So I created one: https://github.com/hirasso/scrollmirror

Maybe interesting for other folks like me that don't want to depend on React? :)

First, thanks a lot for this package!

I use it to synchronize two lists. The list items containt a couple of divs and text. When using momentum-based scrolling (which is the case on touch devices without setting -webkit-overflow-scrolling: auto;) the list position is not synchronized properly. It would be very cool, if momentum-based scrolling could be supportet. Scrolling on mobile devices feels so much better when momentum-based scrolling is not disabled.

I'm using an iPad with iOS 10.1