darkroomengineering/react-lenis

Just a Question: How to use lenis.scrollTo() in react apps

GiorgioG182 opened this issue · 3 comments

Hello,

Not an issue but a question since i can't figurate out how to use the instance methods like scrollTo in react-lenis.

I'm using the smoothscroll of lenis without any problem but when i try to use ScrollTo i keep getting errors, i did:

const lenis = useLenis(({}))
then:
useEffect(() => lenis.scrollTo("#info", { immediate: true }));

But i keep getting "TypeError: Cannot read properties of undefined (reading 'scrollTo')"

Am i missing something? Is there an example i can check?

Thanks in advance!

ps:Is there a Discord or a forum i can join?

GFier commented

Hi! The error shows that lenis is undefined when the scrollTo method is invoked.

Have you tried adding lenis as a dependency in the useEffect?

useEffect( () => { lenis?.scrollTo("#info", { immediate: true }) } , [lenis]);

Edit: Also, if it helps, you can look at how lenis is implemented in our starter.

https://github.com/studio-freight/satus

Hi, thanks for the help!

It was that but also some other things that i implemented not correctly...
The satus application it is very helpful, shame i didn't see it before!

I have just one last question.
Is there a difference in wrapping the components with
"<ReactLenis root options={{ ...options }}>" or
" < Lenis root options= {{...options}} > "
it seems smoother with just Lenis in my
React application.

Thanks again

It's the exact same, ReactLenis is just an alias