PageViewer

The PageViewer component is used on your website's public pages.
It is the component that renders a page on the front-end exactly as you can see it in the Admin Interface, but with React Bricks visual edit components (Text, RichText, Image, File, Repeater) in read-only mode.

Props

interface PageViewerProps {
  page: types.Page | null | undefined
  main?: boolean
}

The PageViewer component has just one required prop: page.
It is the page object you get from React Bricks APIs, using usePage or fetchPage.

Before passing the page object to PageViewer, you need to parse it with the cleanPage utility function, which checks incoming blocks from the DB against your bricks schema.

main is true by default. It enables the "click to edit" feature for this Page Viewer, regardless of the clickToEditSide configuration. This is useful when you have multiple PageViewers on a page (for example for page content, header and footer) to choose which PageViewer is the "main" one that defines the slug to be edited with the icon. Previously this parameter was called showClickToEdit.

Usage example, with usePage hook

import React, { useContext } from 'react'
import {
  PageViewer,
  usePage,
  cleanPage,
  ReactBricksContext,
} from 'react-bricks/frontend'

const Viewer = () => {
  const { data } = usePage('home')
  const { pageTypes, bricks } = useContext(ReactBricksContext)

  // Clean the received content
  // Removes unknown or not allowed bricks
  const page = cleanPage(data, pageTypes, bricks)

  return <PageViewer page={page} />
}

export default Viewer

Usage example, with fetchPage

import React, { useState, useContext, useEffect } from 'react'
import {
  PageViewer,
  fetchPage,
  cleanPage,
  ReactBricksContext,
} from 'react-bricks/frontend'

const ViewerFetch = () => {
  const [page, setPage] = useState(null)
  const { apiKey, blockTypeSchema, pageTypeSchema } =
    useContext(ReactBricksContext)

  useEffect(() => {
    fetchPage('home', apiKey).then((data) => {
      const myPage = cleanPage(data, pageTypeSchema, blockTypeSchema)
      setPage(myPage)
    })
  }, [apiKey, pageTypeSchema, blockTypeSchema])

  if (page) {
    return <PageViewer page={page} />
  }
  return null
}

export default ViewerFetch