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 Dashboard, but with React Bricks visual edit components (Text, RichText, Image, File, Repeater) in read-only mode.

Props

interface PageViewerProps {
  page: types.Page | null | undefined
  showClickToEdit?: 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.

showClickToEdit is true by default. If you set it to false, you disable the "click to edit" feature for this pageViewer, regardless of the clickToEditSide configuration.

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