📅 React Embed Modal

A simple, lightweight, and fully customizable React modal component for embedding external content via iframes - perfect for scheduling pages (Google Calendar, Calendly), forms (Typeform, Google Forms), or any embeddable "to show" content.

✨ Features

• 🎨 Fully Customizable - Style with custom CSS classes
• ⚡ Zero Configuration - No Tailwind setup required, works out of the box
• 🪶 Lightweight - Minimal dependencies, ~5-20KB CSS included
• 🔧 TypeScript Support - Full type definitions included
• ♿ Accessible - Built with accessibility best practices
• 📱 Responsive - Works seamlessly on all devices
• 🔌 Universal - Works with any iframe-compatible content (calendars, forms, dashboards, etc.)

📦 Installation

npm install react-embed-modal

or

yarn add react-embed-modal

or

pnpm add react-embed-modal

🚀 Quick Start

import React, { useState } from 'react';
import ReactEmbedModal from 'react-embed-modal';
import 'react-embed-modal/styles.css'; // ← Import the styles

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const config = {
    url: 'https://calendar.google.com/calendar/appointments/schedules/SCHEDULE_ID',
    label: 'Schedule Appointment'
  };

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>
        Schedule a Meeting with Me!!
      </button>
      
      <ReactEmbedModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        url={config.url}
        title={config.label}
        overlayClassName='md:px-16'
      />
    </>
  );
}

That's it! No Tailwind configuration needed. The component includes pre-compiled CSS that works everywhere.

📚 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Controls modal visibility | | onClose | () => void | required | Callback function to close modal | | url | string | required | URL to embed in the iframe | | title | string | 'Embedded Content' | Accessible title for the iframe | | maxWidth | string | '' | Optional Tailwind CSS class to control maximum width (e.g., 'max-w-4xl') | | height | string | 'h-[90vh]' | Optional Tailwind CSS class to control modal height | | showCloseButton | boolean | true | Whether to show the close button | | closeButtonLabel | string | 'Close' | Label text for the close button | | closeButtonIcon | React.ReactNode | <span className="text-xl">✕</span> | Custom icon for close button | | closeOnOverlayClick | boolean | true | Whether clicking overlay closes the modal | | overlayClassName | string | '' | Additional classes for the overlay | | modalClassName | string | '' | Additional classes for the modal container | | iframeClassName | string | '' | Additional classes for the iframe | | closeButtonClassName | string | '' | Additional classes for the close button | | enableScroll | boolean | false | Allow/Prevent background page scrolling when modal is open. When true allows background scrolling |

💡 Usage Examples

Basic Usage with Google Calendar

import ReactEmbedModal from 'react-embed-modal';
import 'react-embed-modal/styles.css';

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://calendar.google.com/calendar/appointments/schedules/YOUR_ID"
/>

Embedding a Typeform

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://form.typeform.com/to/YOUR_FORM_ID"
  title="Customer Feedback Form"
  height="h-screen"
/>

Embedding Google Forms

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
  title="Registration Form"
  maxWidth="max-w-3xl"
/>

Custom Styling

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://calendly.com/your-link"
  maxWidth="max-w-5xl"
  height="h-screen"
  overlayClassName="bg-black/60 backdrop-blur-sm"
  modalClassName="shadow-2xl border-2 border-blue-500"
/>

Custom Close Button

import { X } from 'lucide-react';

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://calendar.google.com/..."
  closeButtonIcon={<X size={20} />}
  closeButtonLabel="Dismiss"
  closeButtonClassName="bg-red-500 hover:bg-red-600 text-white"
/>

Minimal Modal (No Close Button)

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://calendar.google.com/..."
  showCloseButton={false}
  closeOnOverlayClick={true}
/>

Prevent Accidental Closure

<ReactEmbedModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  url="https://calendar.google.com/..."
  closeOnOverlayClick={false}
/>

🎨 Styling

The component includes pre-compiled CSS with sensible defaults. The included styles use Tailwind-like utility classes that work out of the box.

Custom CSS Classes

You can add custom classes to any part of the modal:

// Large centered modal
<ReactEmbedModal
  maxWidth="max-w-6xl"
  height="h-[95vh]"
  overlayClassName="p-8"
/>

// Mobile-friendly responsive modal
<ReactEmbedModal
  maxWidth="max-w-full md:max-w-4xl"
  height="h-screen md:h-[90vh]"
  overlayClassName="p-0 md:p-4"
/>

// Custom themed modal
<ReactEmbedModal
  overlayClassName="custom-overlay"
  modalClassName="custom-modal"
  closeButtonClassName="custom-close-btn"
/>

Using with Tailwind CSS (Optional)

If your project uses Tailwind CSS, the component's classes will integrate seamlessly. You can pass any Tailwind utility classes through the className props.

Note: Tailwind is NOT required - the component works perfectly without it using the included CSS file.

🛠️ Supported Embed Types

This component works with any content that supports iframe embedding:

Scheduling Tools:

• ✅ Google Calendar Appointment Schedules
• ✅ Calendly
• ✅ Cal.com
• ✅ Microsoft Bookings
• ✅ Acuity Scheduling

Forms:

• ✅ Typeform
• ✅ Google Forms
• ✅ JotForm
• ✅ Microsoft Forms
• ✅ Airtable Forms

Other Content:

• ✅ Dashboards (Tableau, Looker, etc.)
• ✅ Video players (YouTube, Vimeo)
• ✅ Maps (Google Maps)
• ✅ Any iframe-compatible content

🔧 TypeScript Support

Full TypeScript support with exported types:

import ReactEmbedModal, { ReactEmbedModalProps } from 'react-embed-modal';

const modalProps: ReactEmbedModalProps = {
  isOpen: true,
  onClose: () => {},
  url: 'https://example.com',
  // ... other props with full autocomplete
};

📄 License

MIT © ALLAOUA Okba

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

💬 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues

🙏 Acknowledgments

Built with ❤️ for the React community.

GitHub Repository • npm Package