Skip to main content

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

{
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
experimentalSidebarRepeaterItems?: boolean
}

We can group configuration settings into 5 main categories:

1. Main CMS configuration

PropertyDefinition
bricksThis is the bricks (content blocks) definition. It is either an array of Bricks or a hierarchical structure to define themes » categories » bricks.
pageTypesThis is the page types definition. It is an array of Page types
customFieldsArray of custom fields or groups of custom fields on a Page, modified via the sidebar's "Document" tab. See Custom fields
permissionsObject to specify fine-grained permissions on Enterprise plans' apps. See Permissions

2. Environment settings

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

PropertyDefinition
appIdIdentifies this React Bricks app. Imported from .env.
It may be public as it is just an identifier, not used to authenticate API calls.
apiKeyAPI Key for React Bricks APIs. Imported from .env.
Used to authenticate Read API calls from the frontend.
environmentThe environment for this project. See Multiple environments
contentClassNameClass applied to the content in the Admin interface, so that the editing environment will look just the same as the front-end.
renderLocalLinkA 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
navigateA 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.
loginPathPath to the Admin "Login" page. Defaults to /admin.
editorPathPath to the Admin "Editor" page. Defaults to /admin/editor.
playgroundPathPath to the Admin "Playground" page. Defaults to /admin/playground.
appSettingsPathPath to the Admin "App Settings" page. Defaults to /admin/app-settings.
previewPathPath to the Admin "Preview" page. Defaults to /preview.
appRootElementA 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.
unsplashApiKeyYour 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

PropertyDefinition
logoThe URL for the logo you want to appear in the Header of the Admin interface
loginUIObject 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
getAdminMenuFunction 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.
clickToEditSideThe 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).
responsiveBreakpointsOptional responsive breakpoints for preview. Defaults to 375px, 768px and 100%. Array of objects with the BreakPoint interface.
blockIconsPositiontypes.BlockIconsPosition.OutsideBlock by default. If you set it to types.BlockIconsPosition.InsideBlock, the small icons for "add new block", "delete block", "duplicate block", "move up", "move down" will be rendered inside the block. Before v3.9.0 the default was "inside".
defaultThemeDefault selected theme in the "Add new brick" interface, when you have bricks of multiple themes.
experimentalSidebarRepeaterItemsEnable a new experimental sidebar interface for repeater items, which will likely become the default in v5

4. Feature flags

PropertyDefinition
enableAutoSavetrue by default. If true, the user will be able to activate autosave using a switch near the Save button
disableSaveIfInvalidPropsfalse 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)
enablePreviewtrue by default. Enables the preview button.
enablePreviewImagefalse 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.
enableUnsplashtrue by default. It enables to search for freely usable images from Unsplash.
enableDefaultEmbedBricktrue by default. It provides a default brick of type "embed" to embed a page in another page. See Page embed
allowAccentsInSlugsfalse by default. If true it allows accented letters in slugs.
PropertyDefinition
isDarkModeA boolean indicating if dark mode is active. Useful to test dark mode in editing, if your Bricks support dark mode.
toggleDarkModeFunction that toggles dark mode. Used by the Admin to test dark mode.
useCssInJsBoolean 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 logo from '../images/logo.svg'

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

export default config