Configuration

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

Here you can configure the Logo for the Admin header and other parameters (many of them will be already configured for you by the starter, based on the React framework you are using).

Configuration object

{
  // Credentials
  appId: string
  apiKey: string

  // CMS Content Blocks, Page Types, Custom fields
  bricks?: Brick<any>[]
  pageTypes?: IPageType[]
  customFields?: Array<ISideEditPropPage | ISideGroup>

  // Environment Settings
  logo?: string
  loginUI?: LoginUI // since 3.3.0
  contentClassName?: string
  renderLocalLink: RenderLocalLink
  navigate: (path: string) => void
  loginPath?: string
  editorPath?: string
  playgroundPath?: string
  appSettingsPath?: string
  previewPath?: string
  getAdminMenu?: (args: { isAdmin: boolean }) => IMenuItem[] // since 3.3.0
  isDarkColorMode?: boolean
  toggleColorMode?: () => void
  useCssInJs?: boolean
  appRootElement: string | HTMLElement
  clickToEditSide?: ClickToEditSide
  responsiveBreakpoints?: ResponsiveBreakpoint[]
  enableAutoSave?: boolean
  disableSaveIfInvalidProps?: boolean
  enablePreview?: boolean
  blockIconsPosition?: BlockIconsPosition
  enablePreviewImage?: boolean
  enablePreviewIcon?: boolean
  enableUnsplash?: boolean
  unsplashApiKey?: string
}

We can group configuration settings into 5 main categories:

1. Main CMS configuration

Property	Definition
`bricks`	This is the bricks (content blocks) definition. It is an array of Bricks
`pageTypes`	This is the page types definition. It is an array of Page types
`customFields`	Array of custom fields or groups of custom fields on a Page, modified via the sidebar's "Document" tab. See Custom fields

2. Environment settings

Let alone logo and contentClassName, all of these environment settings are already set by the starter you choose.

Property	Definition
`appId`	Identifies this React Bricks app. Imported from `.env`. It may be public as it is just an identifier, not used to authenticate API calls.
`apiKey`	API Key for React Bricks APIs. Imported from `.env`. Used to authenticate Read API calls from the frontend.
`contentClassName`	Class applied to the content in the Admin dashboard, so that the editing environment will look just the same as the front-end.
`renderLocalLink`	A functional component that typically wraps your router Link component (for example the Gatsby or Next `<Link>` component), useful to render local links inside the content text and avoiding full page reloads. It is used also to render the header links in the Admin. React Bricks by default renders a `<a>` tag for external links and the `renderLocalLink` component for local links. The renderLocalLink component may use the following props: - `href` (required): destination path - `children` (required): link children elements (for example the link text) - `className`: class to be applied to links - `activeClassName`: class to be applied to active links - `isAdmin`: useful if you need to do different things for the admin interface header links. See the `RenderLocalLink` type definition
`navigate`	A function to navigate to a page. Typically it uses the Gatsby's router `navigate` or Next.js router's `Router.push` functions. React Bricks needs it to manage authentication redirects.
`loginPath`	Path to the Admin "Login" page. Defaults to `/admin`.
`editorPath`	Path to the Admin "Editor" page. Defaults to `/admin/editor`.
`playgroundPath`	Path to the Admin "Playground" page. Defaults to `/admin/playground`.
`appSettingsPath`	Path to the Admin "App Settings" page. Defaults to `/admin/app-settings`.
`previewPath`	Path to the Admin "Preview" page. Defaults to `/preview`.
`appRootElement`	A string selector like `#root` or an HTML Element like `document.getElementById('root')`. This is for accessibility of modals in Admin, to be compliant to WAI-ARIA guidelines.
`unsplashApiKey`	Your API Key to call the Unsplash APIs. You need to set it if you want to use the ability to search from Unsplash.

3. UI configuration

Property	Definition
`logo`	The URL for the logo you want to appear in the Header of the Admin dashboard
`loginUI`	Object to configure the UI of the Login interface: you can set the sidebar image, a logo with its width and height, the welcome message with its CSS styles. See the LoginUI interface reference
`getAdminMenu`	Function that receives the `isAdmin` boolean on the argument object and should return an array of `IMenuItem`. If you provide the `getAdminMenu` function, then the `editorPath`, `playgroundPath` and `appSettingsPath` are not used.
`clickToEditSide`	The corner where to render the "click-to-edit" button in the Viewer. The default is "BOTTOM-RIGHT". The enum values are "BOTTOM-RIGHT" (`types.ClickToEditSide.BottomRight`), "BOTTOM-LEFT" (`types.ClickToEditSide.BottomLeft`), "TOP-RIGHT" (`types.ClickToEditSide.TopRight`), "TOP-LEFT" (`types.ClickToEditSide.TopLeft`), "NONE" (`types.ClickToEditSide.None`).
`responsiveBreakpoints`	Optional responsive breakpoints for preview. Defaults to `375px`, `768px` and `100%`. Array of objects with the `BreakPoint` interface.
`blockIconsPosition`	`types.BlockIconsPosition.InsideBlock` by default. If you set it to `types.BlockIconsPosition.OutsideBlock`, the small icons for "add new block", "delete block", "duplicate block", "move up", "move down" will be rendered outside of the block (useful for example when you have short bricks).

4. Feature flags

Property	Definition
`enableAutoSave`	`true` by default. If true, the user will be able to activate autosave using a switch near the Save button
`disableSaveIfInvalidProps`	`false` by default. If true, the user won't be able to save the content if at least a sideEditProp is not valid (`validate` function present and not returning `true`)
`enablePreview`	`true` by default. Enables the preview button.
`enablePreviewImage`	`false` by default. If set to `true`, it enables the visual select of a new brick to add using images. You will need to provide the `previewImageUrl` string on the bricks' schema.
`enablePreviewIcon`	`false` by default. If set to `true`, it enables the visual select of a new brick to add using icons. You will need to provide the `previewIcon` component on the bricks' schema.
`enableUnsplash`	`true` by default. It enables to search for freely usable images from Unsplash.

Property	Definition
`isDarkMode`	A boolean indicating if dark mode is active. Useful to test dark mode in editing, if your Bricks support dark mode.
`toggleDarkMode`	Function that toggles dark mode. Used by the Admin to test dark mode.
`useCssInJs`	Boolean that should be set to `true` if you use a CSS-in-JS library like Styled Components or Emotion.

Usage example

Here you can see an example of a config.ts file, (link render for a Gatsby-based project):

import React from 'react'
import { Link, navigate } from 'gatsby'
import { types } from 'react-bricks/frontend'
import pageTypes from './pageTypes'
import bricks from './bricks'
import { appId, apiKey } from '../../credentials.config'
import logo from '../images/logo.svg'

const config = {
  appId,
  apiKey,
  pageTypes,
  bricks,
  logo,
  contentClassName: 'content',
  renderLocalLink: ({ href, children, className, activeClassName }) => (
    <Link to={href} className={className} activeClassName={activeClassName}>
      {children}
    </Link>
  ),
  navigate,
  clickToEditSide: types.ClickToEditSide.BottomLeft,
  enablePreviewImage: true,
}

export default config

Configuration

Configuration object​

1. Main CMS configuration​

2. Environment settings​

3. UI configuration​

4. Feature flags​

5. CSS related​

Usage example​