embed-react

React component library for editable iframe items with social media embed support.

GitHub: https://github.com/ntd4996/resize-iframe
NPM: https://www.npmjs.com/package/embed-react

Features

• ✅ Auto-resize iframe height - Automatically resizes height based on content
• ✅ Auto-detect proxy - Automatically detects and uses proxy endpoint if available
• ✅ Client-side proxy - Automatically fetches HTML and injects resize script using blob URLs
• ✅ Social media embeds - Support Twitter, Instagram, Facebook, TikTok, YouTube, LinkedIn
• ✅ Editable iframe items - URL and width controls
• ✅ Zero configuration - Works out of the box without setup (fallback to direct load)
• ✅ TypeScript support

Installation

npm install embed-react react-social-media-embed

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0
• react-social-media-embed >= 2.5.0

Quick Start (Zero Configuration)

import { EditableIframeItem } from 'embed-react';

<EditableIframeItem
  id="iframe-1"
  title="My Embed"
  initialSrc="https://example.com/embed"
/>

The library will automatically:

1. Try to use proxy endpoint /api/embed if available (Next.js)
2. If no proxy available, automatically fetch HTML and inject resize script using blob URLs
3. If CORS prevents fetching, fallback to direct load and try to inject script directly
4. If cross-origin prevents injection, iframe still displays but may not resize

Setup Proxy Endpoint (Optional - For Better Auto-Resize)

For perfect auto-resize with cross-origin URLs, create a proxy endpoint:

Next.js Pages Router

Create file /pages/api/embed.ts:

import type { NextApiRequest, NextApiResponse } from 'next';
import { load } from 'cheerio';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { url } = req.query;
  if (!url || typeof url !== 'string') {
    return res.status(400).json({ error: 'URL required' });
  }

  try {
    const response = await fetch(url);
    const html = await response.text();
    const $ = load(html);

    // Inject resize script
    const script = `
      <script>
        (function() {
          if (window.__iframeResizeHandler) return;
          function updateHeight() {
            const height = Math.max(
              document.body.scrollHeight,
              document.documentElement.scrollHeight
            );
            if (window.parent) {
              window.parent.postMessage({
                type: 'iframe-resize',
                height: height
              }, '*');
            }
          }
          window.addEventListener('load', updateHeight);
          setTimeout(updateHeight, 100);
          window.__iframeResizeHandler = true;
        })();
      </script>
    `;

    $('body').append(script);
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    res.setHeader('Access-Control-Allow-Origin', '*');
    return res.status(200).send($.html());
  } catch (error) {
    return res.status(500).json({ error: 'Internal server error' });
  }
}

See PROXY-SETUP.md for complete code.

Usage

Basic Usage

import { EditableIframeItem } from 'embed-react';

<EditableIframeItem
  id="iframe-1"
  title="My Embed"
  initialSrc="https://yokohamafc.com/2020/10/27/202010271802/embed"
  initialWidth="100%"
/>

Customization

<EditableIframeItem
  id="iframe-2"
  title="Custom Embed"
  initialSrc="https://example.com/embed"
  initialWidth={550}
  enabledEdit={false}
  border={false}
  padding={0}
  marginBottom={0}
  backgroundColor="transparent"
/>

Components

EditableIframeItem

Props:

• id (string, required): Unique identifier
• title (string, optional): Title displayed above iframe
• initialSrc (string, required): Initial URL to embed
• initialWidth (string | number, optional): Initial width (default: "100%")
• enabledEdit (boolean, optional): Enable/disable edit functionality (default: true)
• border (string | boolean, optional): Border style (default: "1px solid rgb(221, 221, 221)")
• padding (string | number, optional): Padding (default: "1rem")
• marginBottom (string | number, optional): Margin bottom (default: "3rem")
• backgroundColor (string, optional): Background color (default: "rgb(249, 249, 249)")
• apiEndpoint (string, optional): Proxy API endpoint (default: "/api/embed")
• useProxy (boolean, optional): Force use proxy (default: auto-detect)

Supported Social Media:

• Twitter/X (twitter.com, x.com)
• Instagram (instagram.com)
• Facebook (facebook.com)
• TikTok (tiktok.com)
• YouTube (youtube.com, youtu.be)
• LinkedIn (linkedin.com)

How It Works

The library uses a multi-layer approach for auto-resize:

1. Server-side proxy (if available): Uses /api/embed endpoint to fetch and inject resize script
2. Client-side proxy: Automatically fetches HTML and creates blob URL with injected script
3. Direct injection: Attempts to inject script directly into iframe (works for same-origin)
4. Fallback: Direct load if all methods fail (iframe displays but may not resize)

License

MIT