Civic Iframe Resizer

A lightweight, efficient iframe resizing utility for Civic Auth applications.

Overview

The Civic Iframe Resizer is a two-part system:

1. Parent Component: A React component (IframeResizer) that wraps a standard iframe and listens for resize messages
2. Child Script: A script that runs inside the iframe content to measure and report size changes

Parent Component Usage

``tsx
import { IframeResizer } from "@civic/iframe-resizer";

function MyComponent() {
return (
src="https://example.com/content"
initialHeight="100px"
animate={true}
animationDuration={250}
onResizeHeight={(height) => console.log(Iframe height changed to ${height}px)}
checkOrigin={false}
allowedOrigins={["https://example.com"]}
// Additional standard iframe props
id="my-iframe"
title="Content Frame"
allow="camera"
allowFullScreen={true}
style={{ borderRadius: '8px' }}
/>
);
}
`

Child Script Integration

To enable resizing, the content loaded in the iframe must include the child script.

$3

Add the following script tag to your iframe content's HTML:

`html

`

$3

`js
import iframeResizerChild from "@civic/iframe-resizer/child";

// The script auto-initializes, but you can call init() explicitly if needed
iframeResizerChild.init();

// For advanced usage, you can create a custom instance with options
import { IframeResizerChild } from "@civic/iframe-resizer/child";

const myResizer = new IframeResizerChild({
targetElement: document.getElementById('content'),
checkInterval: 300,
debounceDelay: 100,
debug: true
});

myResizer.init();
`

How It Works

1. The child script measures the height of the content (default: document.body)
2. When size changes are detected, the child sends a message to the parent
3. The parent receives the message and adjusts the iframe height accordingly

The child script uses multiple detection methods for maximum reliability:
- ResizeObserver (modern browsers)
- MutationObserver (DOM changes)
- Window resize events
- Regular interval polling (fallback)

Options

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| initialHeight | string | "100px" | Initial height before resize messages |
| animate | boolean | true | Whether to animate height changes |
| animationDuration | number | 250 | Animation duration in ms |
| onResizeHeight | function | undefined | Callback when height changes |
| checkOrigin | boolean\|string[] | false | Whether to check message origins |
| allowedOrigins | string[] | [] | Allowed origins if checkOrigin is true |
| + standard iframe props | - | - | src, id, title, etc. |

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| targetElement | HTMLElement | document.body | Element to measure height of |
| checkInterval | number | 200 | Interval for polling height changes (ms) |
| debounceDelay | number | 50 | Debounce delay for resize events (ms) |
| debug | boolean | false | Enable debug logging |

Troubleshooting

If the iframe is not resizing correctly:

1. Check that the child script is being loaded in the iframe content
2. Ensure there are no Content Security Policy issues blocking message passing
3. Try setting debug: true` in the child options to see detailed logs
4. Verify that height changes are being detected (check for any CSS issues)