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) in read-only mode.

Props#

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

The PageViewer component needs just one 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.

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