AntoineW/luge

Impossible to run on React / Gatsby project

Closed this issue · 8 comments

0xSandwich commented

Hello,
I wanted to try your plugin, however I can't run it on my project.
I tried importing the module. I also tried with <script> and , but attributes on my html are not working.
Please could you help?

Best regards

AntoineW commented

Sure, sorry to hear that.

Do you have errors in the console or something?
Do you see the luge message in the console?
What attributes did you try?

0xSandwich commented

"powered by luge / 0.4.2-beta" in the console
I tried the smooth scroll and parallax, and I have no has-smooth-scroll class on the body.

elie222 commented

Would love to learn more about using it with React too. I assume a slightly different set up is required

AntoineW commented

I didn't initially thought that luge could be used with JS framework like React, Vue and others but that could be great!

Right now it doesn't work because luge relies on the DOMContentLoaded event to start, which in React seems to be emitted before luge is actually loaded.

Second thing is that luge doesn't know when the page component is updated by React, so it doesn't know when it has to refresh.

I'm not familiar with React but I set up a demo site and I'm working on an update to make it work with luge.

elie222 commented
0xSandwich commented

I didn't initially thought that luge could be used with JS framework like React, Vue and others but that could be great!

Right now it doesn't work because luge relies on the DOMContentLoaded event to start, which in React seems to be emitted before luge is actually loaded.

Second thing is that luge doesn't know when the page component is updated by React, so it doesn't know when it has to refresh.

I'm not familiar with React but I set up a demo site and I'm working on an update to make it work with luge.

As elie222 wrote above, an update function would be great so we can call it at component mounting and update.
Maybe would be also the opportunity to make the plugin customizable with settings, for instance the smooth scroll lerp

Best regards

AntoineW commented

I updated the code to make luge initialise correctly if the dom is already loaded.

I also added a method to refresh luge after a component update.
You can call luge.lifecycle.refresh() after a transition, once the previous page has been removed.

Would you be able to test it before I publish it? Simply replace the files in your node_modules
luge-0.5.0-beta.zip

Maybe would be also the opportunity to make the plugin customizable with settings, for instance the smooth scroll lerp

You can already change the smooth scroll inertia (or lerp) with luge.settings({smooth: {inertia: 0.1}}) as explained here https://luge.cool/docs/smooth-scroll/

0xSandwich commented

@AntoineW Hello,
It's working now :)
Just have to call the luge.lifecycle.refresh() function in the useEffect or ComponentDidMount hook to make it word on React.

Thanks a lot !