Components structure

ReactBricks

The <ReactBricks> component wraps everything and it acts as a Provider for the <ReactBricksContext> that make the configuration available through Context to all the other components.

Frontend site

The frontend website uses the <PageViewer> component to render a page. It has a page prop which expects the content of a Page from React Bricks API (see also usePage and fetchPage). It renders your bricks with React Bricks visual edit components (Text, RichText, Image, File, Repeater) in read-only mode.

Images are lazy loaded and an optimized version is requested based on screen resolution. The Repeater components render your nested block as they do in the Admin interface.

If you are logged in the Admin, the PageViewer components renders also a floating edit button, so that you can directly go to the interface to edit the page you are viewing.

Admin

On the Admin, every component should be wrapped also by the <Admin> component, which manages authentication and renders the Interface menu.

The <Admin> component contains also a Provider for the AdminContext (current page, preview mode, etc.).

If you build the admin interface yourself, you should create views (routed by your router) for the login, editor, playground and page settings pages. Each of these views will have the wrapping <Admin> component and the view-related component: <Login>, <Editor>, <Playground>, <AppSettings>