Skip to content

Customize React Bricks

React Bricks is designed to be highly flexible and customizable to your specific needs.

The React Bricks main configuration file is located at /react-bricks/config.ts.

In this file, you can customize various settings, including the Logo for the Admin header. Many parameters will be pre-configured by the starter, depending on your chosen React framework.

Configuration object

{
appId: string
apiKey: string
environment?: string
bricks?: types.Brick<any>[] | types.Theme[]
pageTypes?: types.IPageType[]
logo?: string
loginUI?: types.LoginUI
contentClassName?: string
defaultTheme?: string
renderLocalLink: types.RenderLocalLink
navigate: (path: string) => void
loginPath?: string
editorPath?: string
playgroundPath?: string
appSettingsPath?: string
previewPath?: string
getAdminMenu?: (args: { isAdmin: boolean }) => types.IMenuItem[]
isDarkColorMode?: boolean
toggleColorMode?: () => void
useCssInJs?: boolean
appRootElement: string | HTMLElement
clickToEditSide?: types.ClickToEditSide
customFields?: Array<types.ISideEditPropPage | types.ISideGroup>
responsiveBreakpoints?: types.ResponsiveBreakpoint[]
enableAutoSave?: boolean
disableSaveIfInvalidProps?: boolean
enablePreview?: boolean
blockIconsPosition?: types.BlockIconsPosition
enablePreviewImage?: boolean
enableUnsplash?: boolean
unsplashApiKey?: string
enableDefaultEmbedBrick?: boolean
permissions?: types.Permissions
allowAccentsInSlugs?: boolean
warningIfLowBattery?: boolean
}

We can group configuration settings into five main categories:

1. Main CMS Configuration

PropertyDefinition
bricksDefines content blocks. It’s either an array of Bricks or a hierarchical structure of themes » categories » bricks.
pageTypesDefines page types. It is an array of Page types
customFieldsArray of custom fields or field groups on a Page, editable via the sidebar’s “Page” tab. See Custom fields
permissionsObject to specify fine-grained permissions. See Permissions

2. Environment settings

Except for logo and contentClassName, all these environment settings are pre-configured by your chosen starter.

PropertyDefinition
appIdIdentifies your React Bricks app. Typicially imported from .env. It’s public, serving as an identifier, not for API authentication.
apiKeyAPI Key for React Bricks APIs. Typicially imported from .env. Used to authenticate Read API calls from the frontend.
environmentSpecifies the project environment. See Multiple environments.
contentClassNameClass applied to content in the Admin interface, when a wrapping class name is needed to ensure the editing environment matches the front-end appearance.
renderLocalLinkFunctional component wrapping your router Link component (e.g. the Next <Link> component). Used by the React Bricks <Link>, which renders a <a> tag for external URLs and renderLocalLink for local paths.

Props include:
- href (required): destination path
- children (required): link children elements
- className: class to be applied to links
- activeClassName: class to be applied to active links
- isAdmin: true for the admin interface header links.

See RenderLocalLink
navigateFunction to navigate to a page. Typically it uses the framework’s navigation function. Required for React Bricks’ authentication redirects.
loginPathAdmin “Login” page path. Default: /admin.
editorPathAdmin “Editor” page path. Defaults: /admin/editor.
playgroundPathAdmin “Playground” page path. Default: /admin/playground.
appSettingsPathAdmin “App Settings” page path. Default: /admin/app-settings.
previewPathAdmin “Preview” page path. Default: /preview.
appRootElementString selector (e.g.,#root) or HTML Element (e.g., document.getElementById('root')). Ensures WAI-ARIA compliant accessibility for Admin modals.
unsplashApiKeyYour Unsplash API Key. Required for Unsplash image search functionality.

3. UI configuration

PropertyDefinition
logoURL for the logo in the Admin interface header.
loginUIObject configuring the Login interface UI: sidebar image, logo (with width and height), and welcome message (with CSS styles) See the LoginUI interface reference
getAdminMenuFunction receiving the isAdmin boolean on the argument object and returning an array of IMenuItem.

If provided, the editorPath, playgroundPath and appSettingsPath are ignored.
clickToEditSideSpecifies the Viewer’s “click-to-edit” button position. Default: types.ClickToEditSide.BottomRight. See the possible values.
responsiveBreakpointsOptional responsive breakpoints for preview. Defaults to 375px, 768px and 100%. Array of objects with the BreakPoint interface.
blockIconsPositionDefault: types.BlockIconsPosition.OutsideBlock. Set to types.BlockIconsPosition.InsideBlock to render block action icons (add before, add after, delete, move up, move down, duplicate) inside the block.
defaultThemeDefault selected theme in the “Add new brick” interface, when you have bricks of multiple themes.

4. Feature flags

PropertyDefinition
enableAutoSaveDefault: true. Allows users to activate autosave via a switch near the Save button.
disableSaveIfInvalidPropsDefault: false. If true, prevents saving when any sideEditProp is invalid (validate function present and not returning true)
enablePreviewDefault: true. Enables the preview button.
enablePreviewImageDefault: false. If true, enables visual selection of new bricks using images. Requires previewImageUrl in the bricks’ schema.
enableUnsplashDefault: true. Enables Unsplash image search.
enableDefaultEmbedBrickDefault: true. Provides a default “embed” brick type for page embedding. See Page embed.
allowAccentsInSlugsDefault: false. If true, allows accented letters in slugs.
warningIfLowBatteryDefault: false. If true, React Bricks will alert users to save their work or charge their device when battery levels fall below 15% without a power source connected.
PropertyDefinition
isDarkModeA boolean indicating if dark mode is active. Useful to test dark mode while editing, if your Bricks support dark mode.
toggleDarkModeFunction to toggle dark mode. Used to test dark mode in the editor.
useCssInJsBoolean that must be set to true when using a CSS-in-JS library.