2020-10-29 22:15:48 +00:00
# Resize Observer
[component-header:sl-resize-observer]
2021-09-30 21:16:27 +00:00
The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API` ](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ).
2020-10-29 22:15:48 +00:00
2021-09-30 21:16:27 +00:00
The resize observer will report changes to the dimensions of the elements it wraps through the `sl-resize` event. When emitted, a collection of [`ResizeObserverEntry` ](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry ) objects will be attached to `event.detail` that contains the target element and information about its dimensions.
2020-10-29 22:15:48 +00:00
```html preview
< div class = "resize-observer-overview" >
< sl-resize-observer >
2022-03-02 15:10:41 +00:00
< div > Resize this box and watch the console 👉< / div >
2020-10-29 22:15:48 +00:00
< / sl-resize-observer >
< / div >
< script >
const container = document.querySelector('.resize-observer-overview');
const resizeObserver = container.querySelector('sl-resize-observer');
resizeObserver.addEventListener('sl-resize', event => {
2021-09-30 21:16:27 +00:00
console.log(event.detail);
2020-10-29 22:15:48 +00:00
});
< / script >
< style >
.resize-observer-overview div {
2022-03-02 15:10:41 +00:00
display: flex;
border: solid 2px var(--sl-input-border-color);
align-items: center;
2020-10-29 22:15:48 +00:00
justify-content: center;
text-align: center;
2020-10-30 21:04:00 +00:00
padding: 4rem 2rem;
2020-10-29 22:15:48 +00:00
}
< / style >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlResizeObserver } from '@shoelace-style/shoelace/dist/react';
const css = `
.resize-observer-overview div {
display: flex;
2021-11-18 22:41:03 +00:00
border: solid 2px var(--sl-input-border-color);
2021-11-04 22:12:47 +00:00
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
}
`;
const App = () => (
< >
< div className = "resize-observer-overview" >
< SlResizeObserver onSlResize = {event = > console.log(event.detail)}>
2022-03-02 15:10:41 +00:00
< div > Resize this box and watch the console 👉< / div >
2021-11-04 22:12:47 +00:00
< / SlResizeObserver >
< / div >
< style > { c s s } < / style >
< />
);
```
2020-10-29 22:15:48 +00:00
[component-metadata:sl-resize-observer]