ReactBricks

The <ReactBricks> component wraps all the other React Bricks components and acts as a Provider for the <ReactBricksContext> that make the configuration and other information (such as the React Bricks version) available to all the other components.

Usage example

import { ReactBricks, types } from 'react-bricks/frontend'

<ReactBricks
  appId="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  apiKey="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  bricks={...}
  pageTypes={...}
  logo="/logo.svg"
  loginUI={...}
  contentClassName="content"
  renderLocalLink={({ href, children, className, activeClassName }) => {...}}
  navigate={...}
  loginPath="/"
  editorPath="/admin/editor"
  playgroundPath="/admin/playground"
  appSettingsPath="/admin/app-settings"
  previewPath="/preview"
  getAdminMenu={({ isAdmin }) => {...}}
  isDarkColorMode={colorMode === 'dark'}
  toggleColorMode={...}
  useCssInJs={false}
  appRootElement="#root"
  clickToEditSide={types.ClickToEditSide.BottomRight}
  customFields={...}
  responsiveBreakpoints={...}
  enableAutoSave
  disableSaveIfInvalidProps
  enablePreview
  blockIconsPosition={types.BlockIconsPosition.InsideBlock}
  enablePreviewImage
  enableUnsplash
  unsplashApiKey="..."
  enableDefaultEmbedBrick
  permissions={{ ... }}
>
  ...
</ReactBricks>