Skip to main content

ChildPreview

ChildPreview enables responsive previewing of React components rendered directly within the preview container.

Demo​

Width: 0px(NaN%)
00px
max0px

  • Leslie Alexander

    leslie.alexander@example.com

  • Michael Foster

    michael.foster@example.com

  • Dries Vincent

    dries.vincent@example.com

  • Lindsay Walton

    lindsay.walton@example.com

  • Courtney Henry

    courtney.henry@example.com

  • Tom Cook

    tom.cook@example.com

Props​

interface ChildPreviewProps {
  children?: React.ReactNode; // Component to preview
  breakpoints?: BreakpointConfig[]; // Custom breakpoint configuration
  config?: PreviewConfig; // UI configuration
}

Usage​

Import ChildPreview​

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

Use ChildPreview​

<ChildPreview>
  <Child />
</ChildPreview>

Custom Configuration​

<ChildPreview
  config={{
    darkMode: true,
    showToolbar: true,
    showScale: true,
    showLabels: true,
  }}
>
  <YourComponent />
</ChildPreview>

Examples​

Disable Scale & Toolbar​

  • Leslie Alexander

    leslie.alexander@example.com

  • Michael Foster

    michael.foster@example.com

  • Dries Vincent

    dries.vincent@example.com

  • Lindsay Walton

    lindsay.walton@example.com

  • Courtney Henry

    courtney.henry@example.com

  • Tom Cook

    tom.cook@example.com

Colorful​

This is a component which uses container queries to change its background color based on the width of the container.

Width: 0px(NaN%)
00px
max0px