or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

demo-layout.md device-preview.md enhanced-previewer.md index.md previewer-actions.md

tile.json

Previewer Actions

The Previewer Actions component extends dumi's default previewer actions with QR code functionality, enabling easy mobile testing and sharing of demo URLs.

Capabilities

MobilePreviewerActions Component

Enhances the default previewer actions toolbar with mobile-specific features.

import { ReactComponent as IconQrcode } from '@ant-design/icons-svg/inline-svg/outlined/qrcode.svg';
import { useRouteMeta } from 'dumi';
import PreviewerActions from 'dumi/theme-default/slots/PreviewerActions';
import QRCode from 'qrcode.react';
import React, {
  useEffect,
  useState,
  type ComponentProps,
  type FC,
} from 'react';

/**
 * Enhanced previewer actions with QR code support
 * Extends default dumi PreviewerActions with mobile functionality
 * Uses inline type definition - no separate interface needed
 */
type IPreviewerActionsProps = ComponentProps<typeof PreviewerActions> & {
  /** Optional custom QR code URL (defaults to current demo URL) */
  qrCodeUrl?: string;
};

const MobilePreviewerActions: FC<IPreviewerActionsProps>;

// Inherits all props from dumi's PreviewerActions including:
// - demoUrl, demoContainer, iframe, extra, etc.

Key Features:

QR code generation for mobile demo URLs
Integration with Ant Design icons
SSR-compatible URL generation
Custom demo container handling for mobile iframes

QR Code Functionality

Displays a QR code button that shows a scannable code for easy mobile access.

/**
 * QR Code Button Component
 * Renders QR code for demo URL when in mobile mode
 */
interface QRCodeButton {
  /** QR code value (demo URL) */
  value: string;
  /** QR code size in pixels */
  size: 96;
  /** Button title (shows URL on hover) */
  title: string;
}

QR Code Features:

96x96 pixel QR code size
Auto-generated from demo URL
Hover tooltip showing full URL
Mobile mode detection (only shown when mobile: true)

Icon Integration

Uses Ant Design icons for consistent visual design:

/**
 * QR Code Icon from Ant Design Icons
 * SVG icon component for the QR code button
 */
import { ReactComponent as IconQrcode } from '@ant-design/icons-svg/inline-svg/outlined/qrcode.svg';

Mobile Mode Detection

The component reads mobile mode from route metadata:

const { frontmatter: { mobile = true } } = useRouteMeta();

Behavior:

Mobile Mode (mobile: true - Default): Shows QR code button alongside other actions Note: mobile defaults to true when not specified in frontmatter
Desktop Mode (mobile: false): QR code button is hidden

URL Generation and SSR

Handles URL generation with SSR compatibility:

/**
 * QR Code URL state management
 * Handles SSR compatibility and URL updates
 */
interface URLState {
  /** Current QR code URL */
  qrCodeUrl: string;
  /** Setter for URL updates */
  setQrCodeUrl: (url: string) => void;
}

SSR Handling:

useEffect(() => {
  // Adapts for SSR by using location.origin
  setQrCodeUrl(props.qrCodeUrl || `${location.origin}${props.demoUrl}`);
}, [props.demoUrl, props.qrCodeUrl]);

Demo Container Handling

Provides special handling for mobile iframe containers:

/**
 * Demo container resolution for mobile iframes
 * When iframe={false}, uses mobile device iframe as demo container
 */
interface DemoContainerProps {
  /** Original demo container element */
  demoContainer?: HTMLElement;
  /** Whether iframe rendering is disabled */
  iframe?: boolean | number;
}

Logic:

When iframe={false}: Finds and uses the mobile device iframe as demo container
Otherwise: Uses the provided demo container

Usage Examples

Basic Usage: The component is automatically integrated into dumi's previewer system. No manual imports needed.

Custom QR Code URL:

// Custom QR code URL can be passed via props
<MobilePreviewerActions
  qrCodeUrl="https://custom-domain.com/demo"
  demoUrl="/demo/component"
  // ...other props
/>

Mobile Demo with QR Code:

---
mobile: true
---

# Mobile Component Demo

This demo will show a QR code button for easy mobile testing.

Button Structure

The QR code button structure:

<button
  className="dumi-default-previewer-action-btn dumi-mobile-previewer-action-qrcode"
  type="button"
  title={qrCodeUrl}
>
  <IconQrcode />
  <QRCode value={qrCodeUrl} size={96} />
</button>

CSS Classes:

dumi-default-previewer-action-btn: Standard dumi action button styling
dumi-mobile-previewer-action-qrcode: Mobile-specific QR code button styling

Integration with Default Actions

The component wraps and extends the default PreviewerActions:

<PreviewerActions
  {...props}
  extra={
    <>
      {/* QR Code button (when mobile) */}
      {extra}
      {/* Any additional extra content */}
      {props.extra}
    </>
  }
  demoContainer={resolvedDemoContainer}
/>

This ensures all standard previewer actions remain available while adding mobile-specific QR code functionality.

Version

Tile

Files