Trigger a Function when Scrolling to an Element in React with Intersection Observer

preview_player
Показать описание
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
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

💾 Code

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Demo Landing Starter

Intersection Observer

React Intersection Observer

🎼 Music

Music from Uppbeat (free for Creators!):
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.

hamzaeshoul
Автор

Great video Colby! Super striaghtforward and easy to follow! This saved me from a big headache 🙌

lostsunrises
Автор

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.

fidelisitor
Автор

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.

John-eqcd
Автор

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.

silenux
Автор

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

zohabali
Автор

If i knew about this hook before it could have saved me so much heartache thank you for explaining this in a concise way.

KingPacavision
Автор

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.🙂👏

Marlorouse
Автор

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!

JatinS-yt
Автор

thanks for this video mate helps many people who had no idea about such observer hope your channel grows good .

ashimxtha
Автор

This is what I needed for a sticky header changing style whilst scrolling. Thanks a lot

marktheunknown
Автор

Great video, was really helpful
It was nice how you explained each line with enough detail to grasp the concept

athmanbakari
Автор

Nice vid as usual. Very clear and very didactic 👏Thanks a lot Colby!

wytube
Автор

Seriously bro, this is what i've been struggling for many days! Thanks a lot colby!!!

simple_user
Автор

That's brilliant! Thanks for the tutorial. That custom hook saved me a lot of time😊

anthonyiu
Автор

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.🚀🚀

havefun
Автор

Thank you! Your explanation is very simple and clear. And the hooks helps alot

RizaHariati
Автор

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!

ivan
Автор

This is exactly what I was looking for, thank you!

mordicai
Автор

Thanks a lot for this great video, brother...Imma get my pages wiggling so hard now

faustozambrano