Skip to main content

IFramePreview

IFramePreview displays external URLs in a responsive iframe container.

Demo​

Note: In following demo we are supplying https://ui.shadcn.com/view/styles/new-york/sidebar-07 which is one of the blocks on shadcn.

Width: 0px(NaN%)
00px
max0px

Props​

interface IFramePreviewProps {
  srcUrl: string; // URL to display
  height?: number; // Iframe height (default: 930px)
  breakpoints?: BreakpointConfig[];
  config?: PreviewConfig;
}

Usage​

Import IFramePreview​

import { IFramePreview } from "@locospec/responsive-preview-react";

Use IFramePreview​

<IFramePreview srcUrl="//" />

Custom Configuration​

<IFramePreview
  srcUrl="https://ui.shadcn.com/view/styles/new-york/sidebar-07"
  height={500}
  config={{
    darkMode: true,
    showToolbar: true,
    showScale: true,
    showLabels: true,
  }}
/>

Examples​

Disable Scale & Toolbar​