Trigger a Function when Scrolling to an Element in React with Intersection Observer
HTML-код
- Опубликовано: 2 июн 2024
- Learn how to trigger functionality whenever someone scrolls to an HTML element in React with the browser's Intersection Observer API.
We'll walk through using the useRef hook to access a DOM node, using the Intersection Observer to detect if that element is visible inside of the useEffect hook, storing it's visibility in useState, using a hook library, and triggering CSS animations when scrolling down a page.
🧐 What's Inside
00:00 - Intro
00:13 - What tools we'll use like Intersection Observer and React
01:33 - Creating a new React app using a Next.js demo starter
03:01 - Using the useRef hook to access a reference to an HTML DOM node
03:38 - Accessing a Ref in React with useEffect
04:35 - Detecting HTML element visibility with Intersection Observer
06:24 - Storing element visibility state with the useState hook
07:57 - Installing React Intersection Observer hook to simplify code
09:23 - Triggering a CSS animation when scrolling to an element
11:59 - Outro
🗒️ Read More
spacejelly.dev/posts/how-to-t...
💾 Code
github.com/colbyfayock/my-scr...
🔔 Subscribe for more tech and developer videos
ruclips.net/user/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com
👨🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/uses
🧰 More Resources
Demo Landing Starter
github.com/colbyfayock/demo-l...
Intersection Observer
developer.mozilla.org/en-US/d...
React Intersection Observer
github.com/thebuilder/react-i...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/eric-haley/lone-...
License code: LBXM57TITUFTCUND
#colbyfayock #intersectionobserver #reactjs #react #reactjstutorial #nextjs #javascript #webdevelopment 
Наука
Very well explained. Thank you for your effort and your pedagogy. I particularly liked the smooth transition you made between using the intersection observer API and the react-intersection-observer package.
thanks for the kind words!! glad it was helpful
Great video Colby! Super striaghtforward and easy to follow! This saved me from a big headache 🙌
really glad to hear that!
Thanks for the video mate! Been struggling with this for a while now but this has helped me out a lot. Your explanation's really simple and easy to follow.
happy to hear this helped!
Thank you for taking the time to explain this functionality. and triggering concept. It really helps me to understand how to approach certain scrolling use cases in React.🙂👏
you're welcome!
Very clear, as with all of your videos, thanks.
I don't have a favourite use for Intersection Observer, but had been trying to apply it to infinite scrolling. Your video helped me to make the final step.
Using a hidden tag, such as a span, placed at the end of an array.map output, when the user scrolls down and reaches the span, inView becomes true and triggers a call to the database to retrieve additional array elements which are then displayed on the page.
thanks John! that sounds like a good solution. an infinite scroll video could be good 🤔😁
Man it’s 12:30am and I am figuring that shit from 11am from previous day
And this is best video which explained perfectly
Really glad to hear it helped!
thanks for this video mate helps many people who had no idea about such observer hope your channel grows good .
Thanks. 😁
wow!!! It was really smooth. Was looking for a solution like this for almost a day. You explained it in a perfect way. Thanks for providing so much value
Thanks glad to hear that!
This was great.
Thanks for doing it the manual way first, sometimes we have restrictions on using third party packages so it's great to know how it works under the hood.
thanks, no problem, definitely great to see both ways to have the option
Thanks Colby! This was huge help!
glad to hear that!! 🙌
Great video, was really helpful
It was nice how you explained each line with enough detail to grasp the concept
thank you! glad to hear that :D
Nice vid as usual. Very clear and very didactic 👏Thanks a lot Colby!
no problem! 🙌
Man I can't thank you much, i have been stuck with the using intersection observer for weeks. That's a blessing man, Love you!
glad to hear it helped!! 🙌
If i knew about this hook before it could have saved me so much heartache thank you for explaining this in a concise way.
no problem! glad you were able to eventually find it :)
This is what I needed for a sticky header changing style whilst scrolling. Thanks a lot
No problem!
Thank you! Your explanation is very simple and clear. And the hooks helps alot
No problem 🙌 glad to hear that
Seriously bro, this is what i've been struggling for many days! Thanks a lot colby!!!
No problem 🙌
That's brilliant! Thanks for the tutorial. That custom hook saved me a lot of time😊
Awesome! Thank you 😁
This is exactly what I was looking for, thank you!
np, glad it helped!
Helped a lot! Thank you so much.
no problem!
Great tutorial thank you Colby, helped me out a lot
No problem!
Subscribed mate amazing content
I knew this NPM today, really coool~ it's good tut that you write the code first and then tried to use the NPM package to implement the same functionality.🚀🚀
thanks glad you found it helpful!
Perfect video, so clear! THANK YOU !
yay no problem!
Amazing explanation Colby, you just earned a new sub. Thanks
thank you!
That was exactly what I was looking for. Thank you so much!
you got it! 🙌
So cool and so easy!
thanks James! 🙌
Thank you so much! I had trudged through a bunch of very similar videos with people using scroll evenlisteners in react🤦♂before finding this one!
no problem! glad you eventually found it :)
after many videos I have arrived to the one I need! Thanks for the awesome video man
no problem :)
Thanks bro you explain much better and even saved my time
Glad to hear it helped!
Thank you man! This is awesome! I will start using it today! :)
no prblem! happy to hear it was helpful
I just check it out! thank you so much for explaning this! 😎
no problem!
Perfect video and explanation. I tried to do that on my own and was getting crazy getting undefineds everywhere XD. Cheers master
Thanks! Glad it helped
thanks dude, this was rlly helpful
no problem!
Thanks a lot for this great video, brother...Imma get my pages wiggling so hard now
Wiggle wiggle wiggle
Thank you so much man! Just what I was looking for ❤
no problem!
What an amazing video thank you so much🙏
no problem :D
Great video. Very useful thank you.
You're welcome!
Amazing, thanks buddy 🙏
No problem 🙌
NIce! This is what I was looking for! Thank you
glad you found it! 🙌
Spend a couple of hours before have find the answer in this video. Thanks!
wish you found it sooner :) but glad to hear that it helped!
no way!! TYSM ❤️
btw mixing this whit framer-motion is just *chef kiss*
btw btw no way you actually talked about it!!
😂 similar minds! glad you enjoyed this :)
Your explanation is very much clear and easy to understand 😃
+1 subscriber
Thank you!!
Great video and article, ty for it 🚀
no problem!
Thanks Colby, just what I was trying to do. Suscribed!
Thank you!
you are amazing colby, thanks so much
You got it!!
Really Helpful. Thanks!
no problem!
Top knotch content brother helped a lot at work thanks!
thank you!
Thanks for sharing great knowledge.
no problem! 🙌
Thank you very much Colby!
no problem!
Very good video, helped me a lot!
thanks! glad to hear that
Greta teaching style and wonderful presentation. Thanks.
thanks and your welcome!
Great video, super clear! thanks
thank you!
Finally, I've understood what is useRef. Thanks a lot!
yay no problem!
Team! Thanks Colby. Always glad to see some npm package that does most of the work for me.
definitely a useful one :)
Wow, this was so easy! Thank you!
No problem 🙌
Colby yous the goat. Thanks for the vids dude
thank you 🙏
Super useful! Thank you so much!
No problem! 🙌
Thank you so much for this!!
no problem!
Thanks alot, i tried getting the window.scrollY to work with React and it is not as simple as the vanilla JS version. Your explanation was easy to follow, subscribed 👍
thanks, glad to hear that!
Many many thanks sir. Your tutorial really helps us :)
You're welcome!
Thanks for the superb explanation..keep teaching..
No problem 😁🙌
thank you very much. Bohot time bachaya h is trick ne mera🙏
No problem!
Thanks!!! That was just what I needed!!
No problem 🙌
Man, you are a life saver!
i got you!
Learned too much from this thank you
no problem!
Thanks alooootttttttt
For both ways that u said
Love the session
🔥🔥🔥🔥🔥🔥❤️❤️❤️❤️❤️❤️
Glad it helped!
Just wow, i found another gem to the community thank you
Great explanation, thanks
No problem! 🙌
Great content as ever!
thanks :D
Thank you man. I managed to implement your solution successfully
awesome! glad it worked out 💪
was a life-saver. Thanks a lot.
No problem 🙌
I like the way you teach !
Great contents ! Thanks for sharing ! It's sooooo helpful ! +++
Thank you! No problem at all 🙌
x2
Thank you so much. Always wanted to know how to use intersection observer in react and how such animations worked in react without reaching for a library like framer motion.
no problem! Framer is an awesome library but there's a lot you can do before jumping on it
really understandble,thanks bro.
no problem!
Thank you so much Colby
no problem!
Fantastic! You earned your subscription.
thank you!!
@@colbyfayock btw do you mind telling me where to buy this T-shirt you are wearing?
@@developedbyvarun i got it on the GitHub Shop though im not seeing it: thegithubshop.com/
Sad!
Great video! You just gained a sub! :)
thank you!!
thx a lot it was very helpful👍
Np!
this video helped me alot!
awesome to hear!
nice tutorial, thank you ;)
no problem!
All of your videos have great little nuggets of "hey this is how useRef works" or other quirky functions/hooks/etc. Loving your videos.
thanks! never thought about that perspective, but generally i like to give context around things to not make an assumption people know certain things :D
@@colbyfayock yeah man super appreciated. I feel like part of it is the fact that you explain even the "basic" stuff along the way. I.E., verbally saying "destructuring this import" while typing import { somethingCool } from 'superCool'
great example, thanks a lot
no problem!
Awesome tutorial!!
Thank you!!
Great, video!!
Thank you!
great video thank you
no problem!
Learn something whenever I come here❤
awesome happy to hear that! 🙌
thx friend, you're a friend.
nada 😁
It helped me a lot, thx
Awesome, no problem!
Thank you Colby
you're quite welcome! :)
thank you .. you saved me !
yay! np 🙌
Super useful stuff Colby. Thanks a ton. Btw, what's the VS code theme ur using ? Looks awesome ...
no problem! I'm using Night Owl there marketplace.visualstudio.com/items?itemName=sdras.night-owl
Köszönjük!
subscribed my man
thank you!! 🙌
What's your favorite use case of scroll-based triggers? Reply 👇
Make sure to subscribe for more! ruclips.net/user/colbyfayock
is it possible to trigger many items with an classname instead of ref?
@@somerandomchannel382 sure is! check out this example: developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#javascript
THANK YOU SO MUCHHHH
No problem 😁
very helpful video😌😌😌😌
glad to hear that! 🙌
great video
thank you!
Great video Colby! 😃 - I was just wondering if you knew there was a way to have multiple ref triggers using the react-intersection-observer NPM plugin without duplicating the same code and changing the variable names? I had a look at their documentation but couldn't seem to find much information about it. Thanks once again!
im seeing pretty much the same thing, the only option might be to use the InView component with children if im reading that right
@@colbyfayock Thanks for the help Colby! Much appreciated 😄
love it!
thank you!