Schema

Each brick requires a schema property, which defines the brick name, default props, sidebar controls and other things.

Required props

Th required props are just two:

name: a name for this brick. It must be unique within the bricks configured for an App
label: the name displayed for this brick in the editing interface

Let’s see a first simple example of a brick’s schema:

Usage Example

const TextImage: types.Brick<TextImageProps> = ({...}) => {
  return (
    ...
  )
}

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
  previewImageUrl: imgPreview.src,
  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
    imageSide: 'right',
  }),
  sideEditProps: [
    {
      name: 'imageSide',
      label: 'Image Side',
      type: types.SideEditPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Radio,
        options: [
          { value: 'left', label: 'Left' },
          { value: 'right', label: 'Right' },
        ],
      },
    },
  ],
}

Schema Properties

Let’s analyze the schema properties dividing them in 3 groups:

1. Key Properties

Apart from name and label, there are other key properties defined in the schema.

Click on the property to access the dedicated page in the documentation:

`getDefaultProps` A function returning the default props for this brick, when it is added to a page.

`sideEditProps` Array of sidebar controls to let the editors adjust props. Controls can also be organized in collapsible groups.

`repeaterItems` Used in conjunction with a `Repeater` to define the type of brick to be repeated.

`stories` Stories are a way to reuse a brick's configuration. They can be defined in code or saved by content editors.

`getExternalData` and `mapExternalDataToProps` Directly fetch data from an external data source in this brick or map data from the Page Type to props of this brick

3. UI and Categorization

Property	Description
`hideFromAddMenu`	Hide this brick from the “Add new brick” menu. Useful to prevent editors to add directly to a page bricks that are meant to be used only when repeated within another brick.
`previewImageUrl`	Image of the brick shown in the “Add new brick” selection on the right sidebar.
`tags`	A set of tags to help content editors find this brick with the search function (for example, add “cta”, “call to action”, “link” to a “CallToAction” brick)
`playgroundLinkUrl`	Show a link in the Playground for this brick: for example to an external design guideline.
`playgroundLinkLabel`	Label for the Playground link.

Typings for Schema

interface IBlockType<T = Props> {
  name: string
  label: string
  getDefaultProps?: () => Partial<T>
  hideFromAddMenu?: boolean
  sideEditProps?: Array<ISideEditProp<T> | ISideGroup<T>>
  repeaterItems?: IRepeaterItem[]
  newItemMenuOpen?: boolean
  groupByRepeater?: boolean
  getExternalData?: (
    page: Page,
    brickProps?: T,
    args?: any
  ) => Promise<Partial<T>>
  mapExternalDataToProps?: (externalData: Props, brickProps?: T) => Partial<T>
  playgroundLinkUrl?: string
  playgroundLinkLabel?: string
  theme?: string
  category?: string
  tags?: string[]
  previewImageUrl?: string
  previewIcon?: React.ReactElement
  stories?: BrickStory<Partial<T>>[]
}

Properties definition

Property	Definition
`name`	The unique name for this block type (for example “hero-unit”). The “RB_PAGE_EMBED” name is reserved and should be used only for an embed brick.
`label`	The name displayed in the Sidebar when you want to add a new block (for example “Hero Unit”).
`getDefaultProps`	A function returning the default props for new added blocks.
`hideFromAddMenu`	If true, the component isn’t shown in the list of components available in the “add block” menu. For example, you may want to hide a block that can be used only inside of a `<Repeater />`.
`sideEditProps`	The array of objects representing the props the user will be able to modify in the right Sidebar, with their display properties. See Side Edit Props.
`repeaterItems`	Array to specify behaviour of the bricks used in the `<Repeater>` components. See Repeater.
`newItemMenuOpen`	If `true` the “Add new…” accordion menu is open by default; if `false` it is closed by default; otherwise, by default it is open when the number of `repeaterItems` is less than or equal to 4 and closed otherwise.
`groupByRepeater`	`false` by default. If set to `true` the items that can be repeated are grouped by repeater (if you set the `positionLabel` the title of each collapsible section is the `positionLabel`).
`getExternalData`	Function to fetch external data. It has the page, the brick’s props and a third argument as arguments and should return (async) an object which is merged to the brick’s props. See External content.
`mapExternalDataToProps`	Function that gets as first argument the external data (from the `getExternalData` function specified on the pageType) and as second argument the props on this brick. It should return the new props for this brick. See External content.
`playgroundLinkUrl`	Url to link in the Playground, for example to link docs, guidelines, etc.
`playgroundLinkLabel`	Text for the link in the Playground, for example to link docs, guidelines, etc.
`category`	Used to categorize bricks. Bricks will be shown grouped by category.
`tags`	Tags are used to search bricks in the Admin interface.
`previewImageUrl`	Image URL to be used as preview image for this brick. You can create easily a “screenshot image” of a brick from the Playground. It is shown only if you set the `enablePreviewImage` flag to `true` in the React Bricks configuration.
`stories`	You may define default stories on a brick. Editors will be able to add their own stories saved on the React Bricks APIs. This feature is available only for “Pro” and upper plans. See Stories and the BrickStory type