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
}
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