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)