13 lines
1.3 KiB
JavaScript
13 lines
1.3 KiB
JavaScript
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};
|