Device Preview

The Device Preview component provides a mobile device frame that renders demo content within an iframe, simulating the appearance of viewing the demo on an actual mobile device.

Capabilities

Device Component

Creates a mobile device frame containing an iframe for demo content.

import { useSiteData } from 'dumi';
import type { FC } from 'react';
import React from 'react';

interface IDeviceProps {
  /** URL of the demo content to display in the iframe */
  url: string;
  /** Optional inline height override in pixels */
  inlineHeight?: number;
}

/**
 * Mobile device frame component for demo preview
 * Renders demo content within a simulated mobile device interface
 */
const Device: FC<IDeviceProps>;

Features:

• Configurable device width via theme configuration
• Iframe-based content isolation
• Responsive sizing with padding-top for aspect ratio
• Integration with dumi's theme configuration system

Styling and Configuration

The component uses CSS custom properties and theme configuration:

// Device width is configured via dumi themeConfig
const themeConfig = {
  deviceWidth: 375 // Width in pixels (default: undefined)
};

CSS Structure:

.dumi-mobile-device {
  width: var(--device-width, auto);
  padding-top: var(--inline-height, 0);
}

.dumi-mobile-device iframe {
  /* Full iframe styling for demo content */
}

Usage Examples

Basic Device Frame:

// Automatically used by dumi theme system
// No manual instantiation needed

With Custom Device Width:

// .dumirc.ts
export default {
  themeConfig: {
    deviceWidth: 414, // iPhone 6 Plus width
  }
};

With Inline Height: When used within the Enhanced Previewer, the device can receive an inline height:

// Passed from previewer iframe configuration
<Device 
  url="/demo/component"
  inlineHeight={600}
/>

Integration with Theme System

The Device component is automatically used by:

1. Enhanced Previewer: When mobile mode is enabled
2. Demo Layout: For iframe-based demo rendering
3. Dumi Theme System: Resolved as dumi/theme/slots/Device

The component reads device width from dumi's site data:

const { themeConfig: { deviceWidth } } = useSiteData();

Iframe Communication

The Device component renders demos in an isolated iframe with the title "dumi-previewer". This provides:

• Content isolation from the parent documentation page
• Independent styling and scripting environment
• Mobile-specific rendering context
• Touch event handling within the iframe

The iframe source URL corresponds to the demo page URL, enabling full functionality testing within the mobile device frame.