Do you want to remove bulky packages that perform Infinite scrolling or Lazy loading with just a few lines of code? Then I have something interesting to show you. Introducing Intersection Observer!!!
How does Intersection Observer work?
To put it in simple terms it works like magic 🎊 That's it! Let's move on...
If you want to know more about it then fine!!! It's a web API that takes a callback. This callback is triggered when a target element intersects with either the viewport or a specified element (Lets call it Root Element or Root).
How do I use it?
Create an IntersectionObserver object by passing the callback function and configuration object.
The configuration (also called options) take 3 values. root, rootMargin and threshold and it looks something like this.
// Defining config
let config = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
// What action needs to be taken
let callback = () => {
// Here you specify what needs to be done
// More on this later
}
// Creating an observer object
let observer = new IntersectionObserver(callback, config)
Before we move towards an example let me briefly explain what each value in config does.
-
Root: It is used as a viewport to check the visibility of the target. By default it takes browser viewport if
nullis passed. - RootMargin: It's the margin around the root.
- Threshold: It is called intersection ratio and has a range from 0.0 to 1.0 with 1.0 being 100% visible of the target within the root.
Now let's talk about the callback. The callback takes one parameter of type array. The reason behind it being an array is because you can add multiple target (entities having same id name) to a single observer. We use the isIntersecting property to decided whether the observable element is visible or not.
Example
Enough explanation and let's move towards an example. You can check out the entire here
...
const App = () => {
// Create an observer object
const observer = useRef(null);
observer.current = new IntersectionObserver(
(entries) => {
// entries is of type array
entries.forEach((entry) => {
// this will tell if the element is visible or not
if (!entry.isIntersecting) {
return;
}
// Do something
})
}, {
root: document.querySelector("#App"),
rootMargin: "0px",
threshold: 0.3,
});
...
// ComponentDidMount, Make sure to observe the element after render
useEffect(() => {
observer.current.observe(document.querySelector("#observe-this"));
}, []);
...
return (
<div className="App">
...
{/* When this div is visible, fetch new data */}
<div id="observe-this"></div>
...
</div>
);
};
...
The example above must be self explanatory. If not then let me summarise.
- Create an observer object, if its a class based component then add the object creation snippet in the constructor.
- While creating an observer you need to pass a callback and an option object. This will tell the Observer the following:
- What needs to be done when an callback is triggered.
- When should the callback be called.
- What is the visible are?
- When the component renders, point the element to be observed.
Top comments (0)