10 Useful Web APIs for 2020

#   
## Resize observer API

The **Resize Observer [API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)** provides a way to notify an observer if an element it is registered on is re-sized in any way.

The `ResizeObserver` class is provided with an observer that will be called on every resize event.

---
    const resizeObserver = new ResizeObserver(entries => {
        for(const entry of entries) {
            if(entry.contentBoxSize)
                consoleo.log("element re-sized")
        }
    })

    resizeObserver.observe(document.querySelector("div"))
---

#   
## Code

Whenever the divs are re-sized, `“element re-sized”` is printed on the console.

Let’s see an example of how to use the `Resize Observer API`.

<html>
<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">

        <div class="web-api-card">
            <div class="web-api-card-head">
                Demo - ResizeObserver
            </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div id="stat"></div>

                <div id="resizeBoxCnt">
                    <div id="resizeBox"></div>
                </div>

                <div>
                    <span>Resize Width:<input onchange="resizeWidth(this.value)" type="range" min="0" max="100" value="0" /></span>
                </div>

                <div>
                    <span>Resize Height:<input onchange="resizeHeight(this.value)" type="range" min="0" max="100" value="0" /></span>
                </div>

            </div>
        </div>
    </div>
</body>

try {
        var resizeObserver = new ResizeObserver(entries => {
            for(const entry of entries) {
                    stat.innerHTML = "Box re-sized. Height:" + entry.target.style.height + " - Width:" + entry.target.style.width
            }
        })
        resizeObserver.observe(resizeBox)
    } catch(e) {
        error.innerHTML = "ResizeObserver API not supported in this device."
        error.classList.remove("close")
    }

    function resizeWidth(e) {
        resizeBox.style.width = `${e}px`
    }

    function resizeHeight(e) {
        resizeBox.style.height = `${e}px`
    }

codemirror

#   
## Explanation

We have range sliders here. If we slide them, they will change the height and width of the `<div> #resizeBox`.

We registered a `ResizeObserver` on the `<div #resizeBox>`, with an observer. It will display the message indicating that the box has been re-sized and the current values of its height and width.

Try to slide the range sliders; you will see the `<div #resizeBox>` change in width and height. Also, we see that the info is displayed in the `<div #stat>` box.

>Try it live here:
[ResizeObserver](https://web-api-examples.github.io/resizeobserver.html).

What is the resize observer API in web API?

Notifies observers when registered elements resize, printing "element re-sized" on change.