Hello Leigh, I just had the urge to pause the video so that I may thank you for this amazing lesson, and your calm style of teaching a complicated topic. THANK YOU!
@leighhalliday3 жыл бұрын
Hey Abs! Thank you so much :) Glad you enjoyed it!
@absyas59453 жыл бұрын
@@leighhalliday I really did, it helped me lazy load an animation, but I've noticed you have to use the triggerOnce option or else you get an undesirable effect (alternates between visible and hidden very quickly at the intersection). Ideally I really would've like it if the animation toggled between the two states smoothly. If you have any tips please let me know, in the mean time THANK YOU once again!
@caleb.393 жыл бұрын
I absolutely love the React community. In my experience most people who do tutorials are so knowledgeable, it's different from other programming languages where the person making the tutorial can seldom explain what they're doing
@missmunmi3 жыл бұрын
loved the way you explained. Thank you.. Keep up the good work. Glad I found this video :) Happy coding...
@leighhalliday3 жыл бұрын
Thank you Munmi, glad it helped!
@gamehatred3 жыл бұрын
Amazing tutorial, just what I needed to implement Intersection Observer in my project! Subscribed!
@leighhalliday3 жыл бұрын
Awesome! Thanks for subscribing gamehatred!
@gamehatred3 жыл бұрын
@@leighhalliday Now I'm watching the google maps and google places video because I need to implement them as well, how are you doing this? :D
@masihqashqai93743 жыл бұрын
What if there are many sections or divs that need to be tracked for intersection? Your method only works for tracking one element intersection right?
@mahakal764 жыл бұрын
loving your videos man I've learned alot from you, I hope you keep putting out the great react content.
@leighhalliday4 жыл бұрын
Thank you mahakal!! That's awesome! More vids on the way 👀
@chany00335 жыл бұрын
Interesting demo! , nice to see you again.
@leighhalliday5 жыл бұрын
Thanks, Chany! Life is busy right now so it's hard to put out a lot of content but I'm doing my best :)
@okaforirene26103 жыл бұрын
Your content is always so helpful. Keep up the amazing work
@leighhalliday3 жыл бұрын
Thank you very much Okafor!
@janisdregeris2482 жыл бұрын
Thank You so much, perfect explanation! 👍
@leighhalliday2 жыл бұрын
Glad you enjoyed it!
@yashpandey95504 жыл бұрын
Great content. Absolutely loved it. :)
@leighhalliday4 жыл бұрын
Thanks Yash! Glad you enjoyed it!
@nitin-goyal3 жыл бұрын
Awesome explanation man!
@leighhalliday3 жыл бұрын
Thank you nitin!
@huracan3113 жыл бұрын
thanks! great explanation
@leighhalliday3 жыл бұрын
Thank you Andres!
@gamspi95912 жыл бұрын
Thank You
@henokzelalem19643 жыл бұрын
thanks man helped a lot!
@leighhalliday3 жыл бұрын
Nice! Glad I could help :)
@sebastiantramper32603 жыл бұрын
Thank you for this great explanation of the intersection observer! further more i am looking into using multiple sections. Any ideas how to do that?
@danihazler4 жыл бұрын
Thanks for that!!! Just wondering if this could be done as a HOC, so when applying to multiple sections wouldn't need to set a ref to each one of them.
@leighhalliday4 жыл бұрын
Hmmm... I'm not sure! I'd be tempted to try to do it as a custom hook rather than an HOC. I think you would want a ref for each one though no? The intersection obsevrver needs an actual ref to a dom element for it to work.
@danihazler4 жыл бұрын
@@leighhalliday actually, with the help of your second video (kzbin.info/www/bejne/fYenmqppoaasppI) I've manage to do it! Thannnks! :)
@satindersingh96712 жыл бұрын
One more gem
@satindersingh96712 жыл бұрын
Whatever topics I struggled with, strangely enough you have video on those. We are like minded
@leighhalliday2 жыл бұрын
Haha glad they are helpful!
@theodoreandrew57553 жыл бұрын
Like your explanation. It's super clear :) Just one thing that I am still confused is that why do we use setRef instead of just using regular useRef? Thanks :)
@leighhalliday3 жыл бұрын
Honestly I can't remember :D Give it a try with useRef, and if it works, go for it!
@chazkondo4 жыл бұрын
subbed
@leighhalliday4 жыл бұрын
Welcome, Chaz!
@haruwiki2 жыл бұрын
Do you know if this observer API also works horizontally?
@mantisory4 жыл бұрын
How would you adjust this to have multiple sections in the page animate separately? I was thinking to set the ref on each element directly, but I think there must be a better way...
@leighhalliday4 жыл бұрын
Hey Byron! Yes, I think you'd need to set up multiple observers, each on their own element (with ref), each animating a specific portion of the page. There is no reason you couldn't adjust this to support many elements.
@mantisory4 жыл бұрын
@@leighhalliday Thanks. Yeah, I ended up setting references for each section individually using the hook...works well, but just a bit cumbersome. I have a couple ideas though..
@karenabgaryan78464 жыл бұрын
in real world there is always multiple intersections, so its better to a little change project, because for example i spend lot of time to make this work with arrays, or multiple refs, result its not working, so this is not for deploying, just some hobby project
@leighhalliday4 жыл бұрын
Hey Karen! Thanks for the feedback. I'd say the purpose of this video is to teach concepts... and then you can take them to implement for your exact use-case. If I were building an app, I'd be tempted to use this package which has thought of a lot more edge cases than the one I demo in this video. www.npmjs.com/package/react-intersection-observer
@ironpurush09783 жыл бұрын
You should provide line=k to your code as well.
@leighhalliday3 жыл бұрын
Sorry! I do for approximately 96.125% of my videos, but I guess I forgot this one...
@ironpurush09783 жыл бұрын
@@leighhalliday It's alright man, it's just that we can read the code for correction.
@window.location4 жыл бұрын
Thank you woked like a charm; super; (It will be nice if you share code via GitHub or Gist)
@leighhalliday4 жыл бұрын
Hey Ajith! Sorry, normally I have code but I don't know where it is for this one...
@cod-newbie91665 жыл бұрын
You use a lot of hooks in your code, this is very intimidating. Is there any special case where a hook must be used? Please i want to know.
@leighhalliday5 жыл бұрын
Hey Emeh! No, hooks are optional, as are class based components, but it seems like React is moving more and more towards being functional (as the recommended approach to components), and if you want state and/or effects (componentDidMount), you'll need to become comfortable with Hooks. The great thing is that in a lot of ways I think it makes it easier once you can get over the initial hump of becoming comfortable with them.