@reactslides/shared-ui

Shared UI components library for ReactSlides presentations.

Features

Layout Components

• TitleSlide - Opening slide with title and subtitle
• ContentSlide - Standard content layout with header
• TwoColumn - Two-column layout with flexible ratios
• ThreeColumn - Three-column layout
• FourColumn - Four-column layout
• Grid - Flexible grid layout

Content Components

• Heading - Semantic headings (h1-h6)
• Text - Styled text with size and weight variants
• List - Ordered and unordered lists with animations
• Quote - Stylized quote blocks
• Code - Syntax-highlighted code blocks

Media Components

• Image - Responsive images with fit options
• Video - Video player with controls
• Embed - Embed websites, web apps, and videos

Interactive Components

• Fragment - Step-by-step reveals
• Animation - Animation effects
• Chart - Data visualization
• Diagram - Mermaid diagrams

Embedding Content with Embed

The Embed component makes it easy to embed websites, web applications, and videos directly into your slides.

Basic Usage

import { Embed } from '@reactslides/shared-ui';

// Embed a website
<Embed
  url="https://example.com"
  title="Example Website"
  aspectRatio="16:9"
/>

// Embed a YouTube video (auto-converts URL)
<Embed
  url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Video Demo"
/>

// Embed a web application with sandbox restrictions
<Embed
  url="https://codesandbox.io/embed/..."
  title="Live Code Demo"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
/>

Props

• url (required) - URL to embed (supports YouTube, Vimeo, Google Slides, and generic URLs)
• title - Accessibility title for the iframe
• aspectRatio - "16:9" (default), "4:3", or "1:1"
• allowFullscreen - Allow fullscreen mode (default: true)
• allow - Custom iframe permissions (default: common permissions)
• sandbox - Sandbox restrictions for security
• loading - "eager" (default) or "lazy" for lazy loading
• referrerPolicy - Referrer policy for the iframe

URL Auto-Conversion

The Embed component automatically converts URLs to their embeddable format:

• YouTube: youtube.com/watch?v=... → youtube.com/embed/...
• Vimeo: vimeo.com/123456 → player.vimeo.com/video/123456
• Google Slides: Converts edit URLs to embed URLs

Security

Use the sandbox attribute to restrict iframe capabilities:

<Embed
  url="https://untrusted-site.com"
  sandbox="allow-scripts allow-same-origin"
/>

Common sandbox values:

• allow-scripts - Allow JavaScript
• allow-same-origin - Allow same-origin access
• allow-forms - Allow form submission
• allow-popups - Allow popups

Performance

Use lazy loading for better performance:

<Embed
  url="https://heavy-site.com"
  loading="lazy"
/>

Examples

See the example app (apps/example) for live demonstrations of all components, including multiple iframe embedding scenarios.