Skip to content

A React component to view iframe content in a responsive, resizable container & easily switch between devices

License

Notifications You must be signed in to change notification settings

danmindru/react-responsive-iframe-viewer

Repository files navigation

Screenshot showing responsive iframe viewer demo

Screenshot showing multiple demos, including dark mode

React Responsive Iframe Viewer

npm version

View iframe content in a responsive container that can:

  • Switch between common devices sizes
    • Mobile
    • Tablet
    • Desktop
  • Resize using the provided handles
  • ✨ all animated & pretty
  • 🌚 and with dark mode support

Demo πŸš€ / Usage examples πŸ‘¨β€πŸ’»

Getting started

Install

Grab the package from npm:

npm install react-responsive-iframe-viewer

Setup styles

With TailwindCSS

If you use TailwindCSS, you need to mark this package as content:

tailwind.config.js

module.exports = {
  content: [
+   'node_modules/react-responsive-iframe-viewer/**/*.{js,ts,jsx,tsx,html}',
    ...
  ]
}

Dark mode is supported out of the box for TailwindCSS.

Without TailwindCSS

If you don't use TailwindCSS, you can import the styles directly:

import 'react-responsive-iframe-viewer/dist/style.css'

Usage

import { ResponsiveIframeViewer, ViewportSize } from 'react-responsive-iframe-viewer';

<ResponsiveIframeViewer
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
  size={ViewportSize.mobile}
/>

Options & Props

src - The URL of the iframe content
title - The title of the iframe content
size - The size of the iframe container
minWidth - The minimum width to resize down to (default: 200)
minHeight - The minimum height to resize down to (default: 200)
showControls - Whether to show device controls or not (default: true)
enabledControls - An array of controls to enable (default: [ViewportSize.mobile, ViewportSize.tablet, ViewportSize.desktop, ViewportSize.fluid])
allowResizingY - Whether to allow resizing the iframe container vertically (default: false)
allowResizingX - Whether to allow resizing the iframe container horizontally (default: false)

Custom sizes

You can provide a custom width/height for the iframe container:

  • width - The width of the iframe container
  • height - The height of the iframe container

The size prop will be ignored if width and height are provided.

<ResponsiveIframeViewer
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
  width={320}
  height={568}
/>

Custom controls

It is possible to only show a subset of the available viewport toggles by passing in a list of enabled controls:

import { ResponsiveIframeViewer, ViewportSize } from "../lib/main";

<ResponsiveIframeViewer
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
  size={ViewportSize.mobile}
+  enabledControls={[ViewportSize.mobile, ViewportSize.fluid]}
  allowResizingX
/>

Supported sizes

export const VIEWPORT_SIZES = {
  miniMobile: {
    width: 320,
    height: 480,
  },
  mobile: {
    width: 375,
    height: 667,
  },
  tablet: {
    width: 768,
    height: 1024,
  },
  desktop: {
    width: 1024,
    height: 768,
  },
  fluid: {
    width: "100%",
    height: "100%",
  },

  // Tailwind Viewports
  sm: {
    width: 640,
    height: 1136,
  },

  md: {
    width: 768,
    height: 1024,
  },

  lg: {
    width: 1024,
    height: 768,
  },

  xl: {
    width: 1280,
    height: 720,
  },

  "2xl": {
    width: 1536,
    height: 864,
  },

  "3xl": {
    width: 1920,
    height: 1080,
  },
};

Screenshot showing a nice demo with a shadow


Apihustle Logo

Save 10s of hours of work by using Shipixen to generate a customized codebases with your branding, pages and blog
― then deploy it to Vercel with 1 click.

Shipixen Logo
Shipixen
Create a blog & landing page in minutes with Shipixen.
Try the app on shipixen.com.
Shipixen Logo

Apihustle is a collection of tools to test, improve and get to know your API inside and out.
apihustle.com

Shipixen Logo Shipixen Create a personalized blog & landing page in minutes shipixen.com
Page UI Logo Page UI Landing page UI components for React & Next.js pageui.dev
Clobbr Logo Clobbr Load test your API endpoints. clobbr.app
Crontap Logo Crontap Schedule API calls using cron syntax. crontap.com
CronTool Logo CronTool Debug multiple cron expressions on a calendar. tool.crontap.com

About

A React component to view iframe content in a responsive, resizable container & easily switch between devices

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published