!Screenshot showing responsive iframe viewer demo

!Screenshot showing multiple demos, including dark mode

React Responsive Iframe Viewer


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

$3

Grab the package from npm:

``sh
npm install react-responsive-iframe-viewer
`

$3

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

tailwind.config.js

`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:

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

Usage

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

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)

fluidX - Forces the width to 100% regardless of other settings (default: false)

fluidY - Forces the height to 100% regardless of other settings (default: false)

onIframeLoad - Event handler called when the iframe content has finished loading

$3

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.

`tsx
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:

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

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

`tsx
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

-----------------

-----------------

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
Create a blog & landing page in minutes with Shipixen.
Try the app on shipixen.com. | |

-----------------

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

apihustle.com

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

-----------------