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
We can group configuration settings into five main categories:
1. Main CMS Configuration
Property | Definition |
---|---|
bricks | Defines content blocks. It’s either an array of Bricks or a hierarchical structure of themes » categories » bricks. |
pageTypes | Defines page types. It is an array of Page types |
customFields | Array of custom fields or field groups on a Page, editable via the sidebar’s “Page” tab. See Custom fields |
permissions | Object 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.
Property | Definition |
---|---|
appId | Identifies your React Bricks app. Typicially imported from .env . It’s public, serving as an identifier, not for API authentication. |
apiKey | API Key for React Bricks APIs. Typicially imported from .env . Used to authenticate Read API calls from the frontend. |
environment | Specifies the project environment. See Multiple environments. |
contentClassName | Class applied to content in the Admin interface, when a wrapping class name is needed to ensure the editing environment matches the front-end appearance. |
renderLocalLink | Functional 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 |
navigate | Function to navigate to a page. Typically it uses the framework’s navigation function. Required for React Bricks’ authentication redirects. |
loginPath | Admin “Login” page path. Default: /admin . |
editorPath | Admin “Editor” page path. Defaults: /admin/editor . |
playgroundPath | Admin “Playground” page path. Default: /admin/playground . |
appSettingsPath | Admin “App Settings” page path. Default: /admin/app-settings . |
previewPath | Admin “Preview” page path. Default: /preview . |
appRootElement | String selector (e.g.,#root) or HTML Element (e.g., document.getElementById('root') ). Ensures WAI-ARIA compliant accessibility for Admin modals. |
unsplashApiKey | Your Unsplash API Key. Required for Unsplash image search functionality. |
3. UI configuration
Property | Definition |
---|---|
logo | URL for the logo in the Admin interface header. |
loginUI | Object configuring the Login interface UI: sidebar image, logo (with width and height), and welcome message (with CSS styles) See the LoginUI interface reference |
getAdminMenu | Function receiving the isAdmin boolean on the argument object and returning an array of IMenuItem .If provided, the editorPath , playgroundPath and appSettingsPath are ignored. |
clickToEditSide | Specifies the Viewer’s “click-to-edit” button position. Default: types.ClickToEditSide.BottomRight . See the possible values. |
responsiveBreakpoints | Optional responsive breakpoints for preview. Defaults to 375px , 768px and 100% . Array of objects with the BreakPoint interface. |
blockIconsPosition | Default: 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. |
defaultTheme | Default selected theme in the “Add new brick” interface, when you have bricks of multiple themes. |
4. Feature flags
Property | Definition |
---|---|
enableAutoSave | Default: true . Allows users to activate autosave via a switch near the Save button. |
disableSaveIfInvalidProps | Default: false . If true , prevents saving when any sideEditProp is invalid (validate function present and not returning true ) |
enablePreview | Default: true . Enables the preview button. |
enablePreviewImage | Default: false . If true , enables visual selection of new bricks using images. Requires previewImageUrl in the bricks’ schema. |
enableUnsplash | Default: true . Enables Unsplash image search. |
enableDefaultEmbedBrick | Default: true . Provides a default “embed” brick type for page embedding. See Page embed. |
allowAccentsInSlugs | Default: false . If true , allows accented letters in slugs. |
warningIfLowBattery | Default: 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. |
5. CSS related
Property | Definition |
---|---|
isDarkMode | A boolean indicating if dark mode is active. Useful to test dark mode while editing, if your Bricks support dark mode. |
toggleDarkMode | Function to toggle dark mode. Used to test dark mode in the editor. |
useCssInJs | Boolean that must be set to true when using a CSS-in-JS library. |