Repeater Items

When you need to repeat bricks inside another brick, creating a nested structure, you use a Repeater component.

To let React Bricks know which brick (or bricks) should be repeated inside a Repeater, add the repeaterItems array to the brick’s schema.

Usage Example

MyBrick.schema = {
  ...
  repeaterItems: [
    {
      name: 'socialProof',
      itemType: 'customer-logo',
      itemLabel: 'Logo',
      max: 12,
    },
  ],
}

Properties

Here’s the TypeScript interface for repeaterItems:

repeaterItems?: IRepeaterItem[]

Where IRepeaterItem is defined as:

interface IRepeaterItem {
  name: string
  label?: string
  itemType?: string
  itemLabel?: string
  defaultOpen?: boolean
  min?: number
  max?: number
  positionLabel?: string // DEPRECATED => use "label"
  getDefaultProps?: () => Props
  items?: {
    type: string
    label?: string
    min?: number
    max?: number
    getDefaultProps?: () => Props
  }[]
}

Properties Definition

Property	Definition
name	Name of the prop containing the repeated items (e.g., “buttons”)
itemType	Corresponds to the unique name of the repeated Brick type (e.g., “my-button”)
label?	Label for the group of items in this repeater (title of nested items)
itemLabel?	Optional label for Add / Remove buttons. If not provided, the repeated brick’s label is used as a fallback
min	Minimum number of repeated items allowed. React Bricks ensures at least this number of blocks (adding items with default values)
max	Maximum number of repeated items allowed. When reached, no more blocks can be added to the repeater
getDefaultProps	Function returning default props for the repeated bricks. For example, for a Button brick repeated inside a Form brick, you could specify that the default type should be “submit” instead of “link”.
items	Allowed item types, when multiple. In this case the main itemType and min are ignored. Each item has its own type, label, min, max and getDefaultProps.

Multiple item types

• itemType is used for a single type of brick that can be repeated in a Repeater (e.g. a Thumbnail in a Gallery).
• items is used for multiple types of brick in a Reapear (e.g., in a Form you may add “TextInput” blocks or “Select” blocks).
• With multiple item types, each with its own min and max, the root item’s min is ignored, while the overall max is still enforced.