Compatibility multiscroll with ReactJS

[Mattias16-beep]

Hello,

I would like to know if multiscroll.js is compatible for use within a ReactJS project. I’ve seen the installation instructions for standard JavaScript setups, but I’d like to confirm if there are any specific adaptations or recommendations for integrating it into a React environment.

Thank you for your help and for this great project!

[alvarotrigo]

but I’d like to confirm if there are any specific adaptations or recommendations for integrating it into a React environment.

Nothing specific. The integration would be the same as in any vanilla jQuery library.

Perhaps this can help: https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs

[Mattias16-beep]

I was able to successfully implement the library in my React + Vite project.

However, when using the mouse scroll, it scrolls twice, causing the sections to switch between 1 right and 3 left, and vice versa.

I’ve attached a video showing the issue.

I’m not sure if this is due to an incompatibility of the package with React or a configuration issue on my end.

I can attach my code if needed.

Thank you for your help!

PS: I tried using this library in a vanilla JQuery project, and it worked perfectly. However, for easier development, I’d like to use it in my ReactJS project.

https://streamable.com/4wnczv

[alvarotrigo]

To be honest i don't know what can be happening there. Make sure you add the CSS and the JS file correctly and that none of the CSS attributes is being overwritten by your own.

[Mattias16-beep]

@alvarotrigo, i think that my CSS files are clean.

But while checking my console, i can see this error appearing..

ReferenceError: assignment to undeclared variable lastScrolledDestiny
    jQuery 5
    MultiScrollComponent ms-component.jsx:15
    promise callback*MultiScrollComponent/< ms-component.jsx:14
    React 7
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-BUSYA2B4.js:3
    js index.js:6
    __require chunk-BUSYA2B4.js:3
    React 2
    __require chunk-BUSYA2B4.js:3
    js React
    __require chunk-BUSYA2B4.js:3
    js React
    __require chunk-BUSYA2B4.js:3
    <anonymous> react-dom_client.js:21618

[alvarotrigo]

I assume that's a warning? It looks like the variable is not initialised on the JS file and it's assigned here.

You can modify the file and add the global variable on the top with the rest of global variables.