React Responsive Iframe - Auto-Resizing Iframe Component for React | Dynamic Height Adjustment


View on GitHub


🚀 Try the Live Demo

A lightweight, TypeScript-ready React component and hook for automatically resizing iframes based on their content. Perfect for embedding responsive content that needs to adapt to its container. Solve iframe height issues, prevent content overflow, and create seamless user experiences.

Keywords: React iframe, responsive iframe, auto-resize iframe, dynamic iframe height, iframe content detection, React iframe component, TypeScript iframe, iframe resizer, iframe height adjustment, cross-origin iframe

✨ Features

- 🚀 Automatic Resizing: Automatically adjusts iframe height and width based on content
- 📱 Responsive Design: Supports multiple calculation methods for different use cases
- 🔧 TypeScript Support: Full TypeScript definitions included
- 🎯 Flexible Configuration: Customizable responsive behavior and options
- 🔒 Security: Built-in origin checking for secure cross-origin communication
- ⚡ Performance: Event-based resizing (no continuous intervals)
- 🎨 Easy Integration: Simple API that works with any React project
- 🕒 No Initial Height Jump: Optionally hide the iframe until the correct height is calculated (see hideUntilResized)
- 🔄 Content Change Detection: Automatically detects content addition and removal
- 📊 Multiple Calculation Methods: Choose the best height calculation for your use case

🎯 Use Cases

This React responsive iframe package is perfect for:

- 📄 Document Embedding: Embed PDFs, Google Docs, or other documents that need dynamic sizing
- 📊 Dashboard Widgets: Create responsive dashboard components with embedded content
- 📝 Form Embedding: Embed external forms that change height based on content
- 🎥 Video Players: Embed video players that need responsive sizing
- 📱 Mobile Applications: Create mobile-friendly iframe experiences
- 🌐 Cross-Origin Content: Safely embed content from different domains
- 📋 Content Management: Embed dynamic content that changes frequently
- 🎨 Portfolio Websites: Showcase projects in responsive iframe containers
- 📈 Analytics Dashboards: Embed analytics tools with automatic resizing
- 🔧 Developer Tools: Create responsive developer tool interfaces

⚡ Why Choose React Responsive Iframe?

| Feature | Traditional Iframe | React Responsive Iframe |
| ---------------------- | --------------------------------- | ----------------------------------- |
| Height Management | ❌ Fixed height, content overflow | ✅ Automatic height adjustment |
| Content Detection | ❌ No content change detection | ✅ Detects content addition/removal |
| Performance | ❌ Continuous polling | ✅ Event-based resizing |
| User Experience | ❌ Scrollbars, layout shifts | ✅ Smooth, seamless experience |
| Responsive Design | ❌ Fixed dimensions | ✅ Adapts to content and screen |
| TypeScript Support | ❌ No type safety | ✅ Full TypeScript definitions |
| Security | ❌ Basic security | ✅ Origin checking and validation |
| Integration | ❌ Manual implementation | ✅ Simple React component API |

📦 Installation

``bash
npm install react-responsive-iframe
`

or

`bash
yarn add react-responsive-iframe
`

🎮 Live Demo

See it in action! Visit our interactive demo to explore all features:

🚀 Live Demo

The demo showcases:

- ✅ Before vs After comparison with traditional iframes
- ✅ Content addition/removal with automatic height adjustment
- ✅ Parent-child communication examples
- ✅ Different calculation methods for various use cases
- ✅ Performance optimizations and responsive behavior

🚀 Quick Start

$3

`jsx
import { ResponsiveIframe } from "react-responsive-iframe";

function App() {
return (


If you don't set an explicit height, the iframe will start at a default height (e.g., 300px) and "jump" to the correct height after the first resize. To avoid this, use the hideUntilResized prop:

`jsx
src="https://example.com"
width="100%"
responsiveOptions={{ minHeight: 300, autoResize: true }}
hideUntilResized
/>
`

- The iframe will be hidden until the first resize event is received, then shown at the correct height—no visible jump!

$3

`jsx
import { useIframeResizer } from "react-responsive-iframe";

function IframeContent() {
const { resize, sendMessage, isInitialized } = useIframeResizer({
heightCalculationMethod: "bodyScroll",
autoResize: true,
});

return (


| Prop | Type | Default | Description |
| ------------------- | ------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
| src | string | - | The URL of the iframe content |
| width | string \| number | - | Initial width of the iframe |
| height | string \| number | - | Initial height of the iframe |
| responsiveOptions | ResponsiveIframeOptions | {} | Configuration options for responsive behavior |
| onResized | (dimensions: {height: number, width: number}) => void | - | Callback when iframe is resized |
| onMessage | (message: any) => void | - | Callback for messages from iframe |
| onInit | (iframe: HTMLIFrameElement) => void | - | Callback when iframe is initialized |
| hideUntilResized | boolean | false | If true, hides the iframe until the first resize event is received, preventing the initial height jump |

#### Responsive Options

`typescript
interface ResponsiveIframeOptions {
// Height calculation method
heightCalculationMethod?:
| "bodyScroll"
| "bodyOffset"
| "documentElementScroll"
| "documentElementOffset"
| "max"
| "min"
| "grow"
| "lowestElement";

// Width calculation method
widthCalculationMethod?: "scrollWidth" | "offsetWidth" | "max" | "min";

// Resizing behavior
tolerance?: number; // Minimum change in pixels before triggering resize
autoResize?: boolean; // Enable/disable automatic resizing

// Security
checkOrigin?: boolean | string[]; // Check message origin for security

// Size constraints
maxHeight?: number; // Maximum height limit
minHeight?: number; // Minimum height limit
maxWidth?: number; // Maximum width limit
minWidth?: number; // Minimum width limit

// Additional options
sizeWidth?: boolean; // Enable width resizing
scrolling?: boolean; // Enable/disable scrolling
}
`

$3

#### Parameters

`typescript
interface IframeChildResizerOptions {
// Calculation methods
heightCalculationMethod?: HeightCalculationMethod;
widthCalculationMethod?: WidthCalculationMethod;

// Behavior options
autoResize?: boolean;
manualOnly?: boolean; // Manual-only mode (no automatic resizing)

// Constraints
minHeight?: number;
maxHeight?: number;
minWidth?: number;
maxWidth?: number;
tolerance?: number;

// Callbacks
onParentMessage?: (message: any) => void;
}
`

#### Returns

`typescript
{
sendMessage: (message: any) => void;
resize: (customHeight?: number, customWidth?: number) => void;
scrollTo: (x: number, y: number) => void;
scrollToOffset: (x: number, y: number) => void;
isInitialized: boolean;
}
`

🎯 Advanced Examples

$3

`jsx
import { ResponsiveIframe } from "react-responsive-iframe";

function AdvancedExample() {
return (


`jsx
import { ResponsiveIframe } from "react-responsive-iframe";
import { useRef } from "react";

function ManualControlExample() {
const iframeRef = useRef();

const handleAddContent = () => {
// Send message to iframe to add content
iframeRef.current?.sendMessage({
type: "addContent",
data: "New content added!",
});
};

const handleForceResize = () => {
// Force iframe to recalculate its size
iframeRef.current?.resize();
};

return (


`jsx
import { useIframeResizer } from "react-responsive-iframe";
import { useState } from "react";

function DynamicContentExample() {
const [content, setContent] = useState("Initial content");
const { resize, isInitialized } = useIframeResizer({
heightCalculationMethod: "bodyScroll",
autoResize: true,
});

const addContent = () => {
setContent(
(prev) =>
prev +
"\n\nAdditional content added at " +
new Date().toLocaleTimeString()
);
// Force resize after content change
setTimeout(() => resize(), 100);
};

const removeContent = () => {
setContent("Minimal content");
// Force resize after content removal
setTimeout(() => resize(), 100);
};

return (


{content}

`jsx
import { ResponsiveIframe } from "react-responsive-iframe";

function EventBasedExample() {
return (


`jsx
import React, { useRef } from "react";
import { ResponsiveIframe } from "react-responsive-iframe";

function App() {
const iframeRef = useRef();

const handleResize = (dimensions) => {
console.log("🔄 Iframe resized to:", dimensions);
};

const sendMessage = () => {
iframeRef.current?.sendMessage({
type: "updateContent",
data: "New content from parent!",
});
};

return (


export default App;
`

Child App (iframe content):

`jsx
import React, { useState, useEffect } from "react";
import { useIframeResizer } from "react-responsive-iframe";

function IframeApp() {
const [content, setContent] = useState("Welcome to the iframe content!");
const [messageCount, setMessageCount] = useState(0);

const { sendMessage, resize, isInitialized } = useIframeResizer({
heightCalculationMethod: "bodyScroll",
autoResize: true,
minHeight: 200,
maxHeight: 800,
tolerance: 1,
onParentMessage: (message) => {
if (message.type === "updateContent") {
setContent(message.data);
setMessageCount((prev) => prev + 1);
}
},
});

const addContent = () => {
setContent(
(prev) =>
prev +
"\n\n📝 Additional content added at " +
new Date().toLocaleTimeString()
);
};

const sendResponse = () => {
sendMessage({
type: "response",
data: Response #${messageCount + 1} from iframe,
timestamp: new Date().toISOString(),
});
};

return (
style={{
padding: 20,
fontFamily: "Arial, sans-serif",
backgroundColor: "#f9f9f9",
minHeight: "100vh",
}}
>


🎯 Iframe Content

style={{
background: "#fff",
padding: 15,
margin: "10px 0",
borderRadius: "8px",
border: "1px solid #ddd",
}}
>



Status:{" "}
{isInitialized ? "✅ Connected" : "⏳ Connecting..."}