Hi there 👋
I’ve recently been working on removing a lot of third-party packages on my websites and blog. The aim was to rely on as few dependencies as possible for any UI-related elements. While doing that I noticed something…
To keep it short: this API provides a way for you to find out if a target element intersects with a parent element or the window. I found it awesome for the following reasons:
There are two things I really like using the Intersection Observer API for.
The first one is “lazy loading” especially lazy loading elements. I recently tweeted a link to a code snippet showcasing how I use Intersection Observes to load some elements at the bottom of the page of my blog. (this example still uses a third-party package, sorry for that 😅)
Not only do I lazy load these elements but I also dynamically import them at the same time! This way the related code of that element will be downloaded to the client only when the reader reaches the bottom of the page! How cool is that? 😎
The second thing I built with the Intersection Observer API recently is my own Scrollspy. I dedicated a whole blog post about it: Scrollspy Demystified that covers anything from the basics of Intersection Observer to build an efficient React Hook around them.
I hope the use-cases I showcased above made you curious! In case you want to learn more: here are 2 links I’d recommend checking if you want to learn more and start building stuff with the Intersection Observer API:
That’s it for this one! I hope I made you a bit more curious about Intersection Observers and convinced you that they are worth taking a look at.
Thank you for reading, and have a wonderful day!
Did you like this Maxime’s ideas issue? Click here to spread the word and share this newsletter on Twitter. I really appreciate your support!
Want to check out other topics I wrote about? There’s a lot of great content waiting for you on my blog 👉 blog.maximeheckel.com