Previously, while working on a project, I decided to try a new tool to perform media query-style computations. I used resize Observer to do so, and it was powerful. I also learned that container queries are a capability that media query doesn’t have. In this article, we will cover what a resize observer is, how it functions, and why you should use it.
What is Resize Observer?
Resize Observer is a JavaScript tool that makes it simple and effective to perform intricate media query-style calculations. It can do operations that media queries cannot. Like container queries, resize Observer is particularly potent.
The resize observer is used to monitor an element’s exact size and when it changes.
How does Resize Observer work?
The resize Observer is a simple concept to grasp; let’s look at the syntax of how we can create a new resize observer.
Syntax
const observer = new ResizeObserver(entries => {
console.log(entries)
})
In the above code, we created a new object, ResizeObserver, and passed a callback function that receives parameter entries. These entries are a collection of all the elements we observed. Enough of the talking; let’s build something to understand it better.
Code Example
To begin, we will create a container that changes its element’s font size, background colour, padding and text colour when the screen size is less than or equal to 300.
HTML File
<div id="container">
<h1>Introduction</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, saepe
expedita. Aliquam deleniti fuga id similique atque minus ea quo sit,
iusto quibusdam.
</p>
<button>Read More</button>
</div>
In the following code example, we created our ResizeObserver and passed the parameter entries. Next, we create a forEach loop to loop through the elements in the entries.
const observer = new ResizeObserver((entries) => {
entries.forEach((entry) => {
const changeElement = entry.contentRect.width <= 300;
entry.target.style.backgroundColor = changeElement ? "red" : "green";
entry.target.style.color = changeElement ? "white" : "black";
entry.target.style.fontSize = changeElement ? "10px" : "25px";
entry.target.style.padding = changeElement ? "25px" : "10px";
});
});
We will call our observe method in our ResizeObserver to monitor the changes in our element using the id container.
observer.observe(document.getElementById("container"));
Log the entries in our console.log; we will see the contentRect property of the elements in our entries and the changes made in our element as we resize the screen.
console.log(entries)
Let’s see the output below.
The above output shows the changes made to our single elements when we use the resize Observer, unlike the CSS media query that only shows you the changes of the entire page without tracking the individual elements.
Why Should You Use Resize Observer?
Resize Observer is ideal since it responds to changes in the size of any monitored elements and allows you to see those changes. It will enable you to see the scaling of individual parts on our website, whereas media query is concerned with the overall page size.
Conclusion
The resize observer API is simple to use. It aids in resolving the issue of tracking changes made to individual items rather than the entire page. We learned what resize Observer is and how it works in this article. Hopefully, you’ll be able to incorporate it into your future project.
