Test Your Responsive Design Across Devices – Responsive Iframe Viewer

The Responsive Iframe Viewer component offers a responsive, resizable container that enables users to switch between various device sizes including mobile, tablet, and desktop.

The ability to toggle between preset device sizes with the click of a button helps fasten responsive design testing. No longer do you need to manually resize your browser and refresh to see differences.

The component also features animation for a more interactive experience and supports dark mode, catering to users’ preferences and reducing eye strain in low-light conditions.

How to use it:

1. Install the component with NPM.

# NPM
$ npm install react-responsive-iframe-viewer

2. Import the Responsive Iframe Viewer component.

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

3. Fetch an external URL into the component.

<ResponsiveIframeViewer
  src="/path/to/"
  title="Title"
  size={ViewportSize.mobile}
/>

4. Available component props.

src: string;
title: string;
width?: number;
height?: number;
size?: ViewportSizeType;
minWidth?: number;
minHeight?: number;
showControls?: boolean;
enabledControls?: ViewportSizeType[];
allowResizingY?: boolean;
allowResizingX?: boolean;
overrideViewportSizes?: Partial<
Record<
  ViewportSizeType,
  {
    width: number | string;
    height: number | string;
  }
>
>;
iframeClassName?: string;
resizableContainerClassName?: string;
controlsClassName?: string;
controlsContainerClassName?: string;
controlsPreComponent?: React.ReactNode;
controlsPostComponent?: React.ReactNode;

5. Supported screen 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,
  },
};

Preview:

Responsive Iframe Viewer

Download Details:

Author: danmindru

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/danmindru/react-responsive-iframe-viewer

License: MIT

Add Comment