Skip to main content

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'

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