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

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

function MyComponent() {
  return (
    <IframeResizer 
      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.

Method 1: Include via Script Tag

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

<script src="https://your-cdn-or-path/iframe-resizer.child.js"></script>

Method 2: Import in JavaScript

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

Parent Component Props

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.

Child Script Options

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)