React Bricks

Configuration


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

This file imports the appId and apiKey you set in /credentials.config.js and exports the complete configuration.

Configuration object

{
    appId: string
    apiKey: string

    blockTypeSchema: IBlockType[]
    pageTypeSchema: IPageType[]

    logo: string
    contentClassName: string
    renderLocalLink: RenderLocalLink
    navigate: (path: string) => void
    loginPath: string
    editorPath: string
    playgroundPath: string
    appSettingsPath: string
  }

We can group configuration settings into three parts: credentials, schemas and environment settings.

Credentials

appId

Identifies this React Bricks app. Configured in /credentials.config

apiKey

ApiKey for React Bricks APIs. Configured in /credentials.config

Schemas

blockTypeSchema

This is where blocks are defined. See The blocks schema

pageTypeSchema

This is where page types are defined. See Page types

Environment settings

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

logo

The URL for the logo you want to appear in the Header of the Admin dashboard

contentClassName

Useful if you need a particular class applied to all of your content, so that the editing environment will look just the same as the front-end.

renderLocalLink

Very important to manage local links inside the text your users will edit.

The default Link component React Bricks uses to render links renders a <a> tag for external links and uses the component returned by this function to render a local link.

In this way you can provide your framework's router Link component (for example the Gatsby or Next <Link> component), so that local links are managed by the router, with the ability to prefetch pages and without triggering a full page reload.

This function accepts one argument, which is an object with the following keys:

  • href: destination path
  • children: link children elements (the link description)
  • className: class to be applied to links
  • activeClassName: class to be applied to active links
  • isAdmin: useful to do different things for the admin interface header links (used in the Next starter)
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

Usage example

Here you can see an example of a config.js file, for a Gatsby-based project:

import React from 'react'
import { Link, navigate } from 'gatsby'
import pageTypeSchema from './pageSchema'
import blockTypeSchema from './bricks'
import { appId, apiKey } from '../../credentials.config'
import logo from '../images/logo.svg'

const config = {
  appId,
  apiKey,
  pageTypeSchema,
  blockTypeSchema,
  logo,
  contentClassName: 'content',
  renderLocalLink: ({ href, children, className, activeClassName }) => (
    <Link to={href} className={className} activeClassName={activeClassName}>
      {children}
    </Link>
  ),
  navigate,
}

export default config