Impossible to run on React / Gatsby project
Closed this issue · 8 comments
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
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?
"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.
Would love to learn more about using it with React too. I assume a slightly different set up is required
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.
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
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/
@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 !