20 lines
640 B
Text
20 lines
640 B
Text
import { Meta } from '@storybook/blocks';
|
|
import { parameters } from '../../docs/utils/docsPage.js';
|
|
|
|
<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
|
|
|
|
# `resizeObserver`
|
|
|
|
An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this:
|
|
|
|
```svelte
|
|
<script>
|
|
import { resizeObserver } from '@reuters-graphics/graphics-components';
|
|
|
|
let elementWidth = 0;
|
|
</script>
|
|
|
|
<div use:resizeObserver="{(element) => (elementWidth = element.clientWidth)}">
|
|
My width is: {elementWidth}
|
|
</div>
|
|
```
|