An Improved API for the Resize Observer

Resize Observer, Mutation Observer, and Intersection Observers are efficient APIs compared to their older counterparts:

These three observers have similar APIs, although they have differences that will be discussed later. To use an observer, follow these steps:

1. **Create a new observer with the `new` keyword:** This involves passing an observer function to execute.
2. **Handle the observed changes:** This is done through the observer function provided to the observer.
3. **Observe a specific element:** Use the `observe` method.
4. **(Optionally) unobserve the element:** Use the `unobserve` or `disconnect` method, depending on the observer.

For example, using `ResizeObserver`:

“`javascript
// Step 1: Create a new observer
const observer = new ResizeObserver(observerFn);

// Step 2: Handle the observed changes
function observerFn(entries) {
for (let entry of entries) {
// Handle entry
}
}

// Step 3: Observe an element
const element = document.querySelector(‘#some-element’);
observer.observe(element);

// Step 4 (optional): Disconnect the observer
observer.disconnect(element);
“`

Without comments, the code appears as:

“`javascript
const observer = new ResizeObserver(observerFn);

function observerFn(entries) {
for (let entry of entries) {
// Handle entry
}
}

const element = document.querySelector(‘#some-element’);
observer.observe(element);
“`

We can improve the observer APIs for easier usage.

### The Resize Observer

Starting with `ResizeObserver`, the simplest of them all, we encapsulate it in a function:

“`javascript
function resizeObserver() {
// Implementation
}
“`

Refactor the `ResizeObserver` code into the `resizeObserver` function:

“`javascript
function resizeObserver() {
const observer = new ResizeObserver(observerFn);

function observerFn(entries) {
for (let entry of entries) {
// Handle entry
}
}

const node = document.querySelector(‘#some-element’);
observer.observe(node);
}
“`

Pass the `element` to the function to simplify it:

“`javascript
function resizeObserver(element) {
const observer = new ResizeObserver(observerFn);

function observerFn(entries) {
for (let entry of entries) {
// Handle entry
}
}

observer.observe(node);
}
“`

This makes the function versatile, allowing any element to be passed:

“`javascript
// Usage of the resizeObserver function
const node = document.querySelector(‘#some-element’);
const obs = resizeObserver(node);
“`

Next, pass an observer function to the callback:

“`javascript
// Not great
function resizeObserver(node, observerFn) {
const observer = new ResizeObserver(observerFn);
observer.observe(node);
}
“`

Since `observerFn` is consistent, looping through `entries` and acting on each `entry`, we can pass a `callback` for tasks when the element resizes:

“`javascript
// Better
function resizeObserver(node, callback) {
const observer = new ResizeObserver(observerFn);

function observerFn(entries) {
for (let entry of entries) {
callback(entry);
}
}

observer.observe(node);
}
“`

Use the `callback` in `resizeObserver`, making it like an event listener:

“`javascript
// Usage of the resizeObserver function
const node = document.querySelector(‘#some-element’);
const obs = resizeObserver(node, entry => {
// Handle each entry
});
“`

Enhance the callback by providing both `entry` and `entries`:

“`javascript
function resizeObserver(element, callback) {
const observer = new ResizeObserver(observerFn);

function observerFn(entries) {
for (let entry of entries) {
callback({ entry, entries });
}
}

observer.observe(element);
}
“`

Retrieve `entries` in the `callback` if needed:

“`javascript
// Usage of the resizeObserver function
// …
const obs = resizeObserver(node, ({ entry, entries }) => {
// …
});
“`

Pass the callback as an option parameter for consistency with `mutationObserver` and `intersectionObserver` functions:

“`javascript
function resizeObserver(element, options = {}) {
const { callback } = options;
const observer = new ResizeObserver(observerFn);

function observerFn(entries) {
for (let entry of entries) {
callback({ entry, entries });
}
}

observer.observe(element);
}
“`

Use `resizeObserver` like this:

“`javascript
const obs = resizeObserver(node, {
callback({ entry, entries }) {
// Handle entries
}
});
“`

### The Observer Can Take in an Option Too

`ResizeObserver`