Auto-resize

import { useIframeResize } from 'react-iframe-kit';

const ref = useRef<HTMLIFrameElement>(null);
const size = useIframeResize(ref, { axis: 'height', maxHeight: 1600 });
// size: { width, height } | null before the first measurement

Option	Default
`axis`	`'height'`	`'height'`, `'width'` or `'both'`
`minHeight`, `maxHeight`, `minWidth`, `maxWidth`	none	Clamp the applied size.
`apply`	`true`	`false` reports sizes without touching the iframe’s style.
`onResize`		Called with every new content size.
`onResizeLoop`		Called when the feedback-loop guard starts holding growth.
`measure`		Replace the built-in measurement (same-origin only).
`origin`	the origin of `src`	The iframe’s expected origin (cross-origin).

<Frame resize> takes the same options.

Same-origin and cross-origin

Same-origin iframes are measured directly: nothing to do inside the iframe.
Cross-origin iframes can’t be measured from outside, so the page inside reports its own size:

import { connectToParent } from 'react-iframe-kit/child/lite';

connectToParent({ allowedOrigins: ['https://app.example.com'], autoResize: true });

react-iframe-kit/child/lite is the child entry without RPC, about 4 kB instead of 6 kB. Import from react-iframe-kit/child instead when the page also exposes methods or events.

The mode is detected again after every load, so an iframe that navigates between the two keeps working. If a same-origin child also runs autoResize, its reports take over: it knows its own layout.

Measuring width

<html> is always as wide as the iframe, so width can only follow the content when the child’s root shrink-wraps. For axis: 'width' or 'both', add this to the iframe’s document:

html { width: max-content; }

A dev warning tells you when it’s missing.

The feedback-loop guard

Content sized from the viewport, such as height: 100vh plus a margin, grows with the iframe forever: every resize makes the content taller again. When the content keeps following the viewport for 30 measurements in a row, growth is held at its current size, onResizeLoop fires and a dev warning names the likely cause. Growth resumes by itself as soon as the content changes.

Accessibility

An iframe sized to its content has no scroll area of its own, and that helps more than looks:

Zoom and small screens. At 400 % zoom the content reflows with the rest of the page and scrolls with it, instead of sitting in a small box that scrolls separately. That’s what WCAG 1.4.10 (Reflow) asks for.
Keyboard. Nothing needs focus inside the iframe just to scroll it.
Screen readers read the embedded content in the flow of the page, without a nested region to find.

A maxHeight brings the inner scroll area back once the content is taller, so keep it generous and use it for untrusted content, where it matters for safety (see below). Give the iframe a title too: screen readers announce it by that. With a cross-origin page, useIframeTitle can take it from the page itself. More in Accessibility, including iframes inside focus-trapped dialogs.

Hidden iframes

An iframe that is display: none, or in a background tab, measures as 0 × 0. Those measurements are skipped, so the iframe doesn’t collapse and flash back when it becomes visible.