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