Preview

The <Preview> component renders the preview page used by React Bricks preview links.

From the Editor, users can generate a preview link for a page and share it with people who are not React Bricks users. The link includes a preview token, allowing the preview page to render that page content even if it is still draft or unpublished.

Use <Preview> in the route configured as previewPath in your React Bricks configuration. The default preview path is /preview.

Props

interface PreviewProps {
  renderWrapper?: (args: types.IRenderWrapperArgs) => React.ReactElement
}

Property	Definition
`renderWrapper?`	Optional function to wrap the previewed page content. It receives `children`, the page values and the render environment. See `IRenderWrapperArgs`.

Usage example

import { Preview } from 'react-bricks/frontend'

export default function PreviewPage() {
  return <Preview />
}

Usage with renderWrapper

Use renderWrapper when the preview page needs the same layout wrapper as the public website, or a custom wrapper for preview rendering.

import { Preview } from 'react-bricks/frontend'

export default function PreviewPage() {
  return (
    <Preview
      renderWrapper={({ children }) => (
        <main className="mx-auto max-w-5xl px-6">{children}</main>
      )}
    />
  )
}

RSC projects

For React Server Components projects, use fetchPagePreview from react-bricks/rsc instead.