import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{p as o}from"./docsPage-CT2vyZOj.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function t(n){const r={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Actions/resizeObserver",parameters:{...o}}),`
`,e.jsx(r.h1,{id:"resizeobserver",children:e.jsx(r.code,{children:"resizeObserver"})}),`
`,e.jsxs(r.p,{children:["An action you can use to easily to check when a DOM element's dimensions change using the ",e.jsx(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",rel:"nofollow",children:"Resize Observer API"}),". Use it like this:"]}),`
`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-svelte",children:`<script>
  import { resizeObserver } from '@reuters-graphics/graphics-components';

  let elementWidth = 0;
<\/script>

<div use:resizeObserver={(element) => (elementWidth = element.clientWidth)}>
  My width is: {elementWidth}
</div>
`})})]})}function x(n={}){const{wrapper:r}={...s(),...n.components};return r?e.jsx(r,{...n,children:e.jsx(t,{...n})}):t(n)}export{x as default};