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

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.

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.