PreviewFrame

A device frame for a live preview, with its toolbar.

PreviewFrame.tsx

import {PreviewFrame, PreviewToolbar, Text} from 'alinea/components'
import {useState} from 'react'

const page = `data:text/html,${encodeURIComponent(
  '<body style="font-family:sans-serif"><h1>Linen shirt</h1><p>€89</p></body>'
)}`

export function PreviewFrameExample() {
  const [version, setVersion] = useState(0)
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: 420,
        height: 260
      }}
    >
      <PreviewToolbar onReload={() => setVersion(version + 1)}>
        <Text size="sm" color="muted">
          /products/linen-shirt
        </Text>
      </PreviewToolbar>
      <PreviewFrame key={version} title="Preview of Linen shirt" src={page} />
    </div>
  )
}

Props

`<PreviewFrame>`

Renders a live preview of a page in an iframe filling the available space

PropTypeDefaultDescription

srcstringDefault –The previewed url, leave out while it is unknown

title*stringDefault –Accessible title of the iframe

loadingbooleanDefault –Covers the frame with a spinner, eg. until the page has loaded

loadingLabelstringDefault 'Loading preview'Accessible label of the loading spinner, defaults to "Loading preview"

unavailableReactNodeDefault –Shown instead of the frame when there is no src and nothing loads

sandboxstringDefault –The iframe sandbox tokens

allowstringDefault –The iframe permissions policy

onLoad() => voidDefault –

refRef<HTMLIFrameElement>Default –

Also accepts className and style and data-* attributes.

`<PreviewToolbar>`

Browser-like controls above a PreviewFrame

PropTypeDefaultDescription

onBack() => voidDefault –Navigates back in the preview, the button is disabled when left out

onForward() => voidDefault –Navigates forward in the preview, the button is disabled when left out

onReload() => voidDefault –Reloads the preview, the button is disabled when left out

onOpen() => voidDefault –Opens the preview elsewhere, the button is disabled when left out

reloadingbooleanDefault –Shows a spinner in the reload button

labelsPreviewToolbarLabelsDefault –Accessible labels of the buttons

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.