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"
contentClassName="content"
renderLocalLink={({ href, children, className, activeClassName }) => {...}}
navigate={...}
loginPath="/"
editorPath="/admin/editor"
playgroundPath="/admin/playground"
appSettingsPath="/admin/app-settings"
previewPath="/preview"
isDarkColorMode={colorMode === 'dark'}
toggleColorMode={...}
appRootElement="#root"
clickToEditSide={types.ClickToEditSide.BottomRight}
customFields={...}
responsiveBreakpoints={...}
enableAutoSave
disableSaveIfInvalidProps
enablePreview
blockIconsPosition={types.BlockIconsPosition.InsideBlock}
enablePreviewImage
enablePreviewIcon
enableUnsplash
unsplashApiKey="..."
>
...
</ReactBricks>