Skip to main content

Repeater Items

repeaterItems should be an array with one configuration object for each repeated block.
The configuration object has the following shape:

Properties

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

When max is reached, you cannot add any more blocks to the repeater.
When you set a min React Bricks will always add the min number of blocks (using default values).

Multiple item types

  • itemType is used when you have just one type of brick that can be repeated in a Repeater (for example a Thumbnail in a Gallery).
  • positionLabel and items are used when you can have multiple types of brick in a Reapear (for example in a Form you may add "TextInput" blocks or "Select" blocks). In that case the positionLabel identifies the position where this blocks will appear (for example "Top" or "Form fields").
  • When you have multiple item types, each with its own min and max, the min prop on the root item is not considered, while the max number of all items is still enforced.

Properties definition

PropertyDefinition
nameName of the prop passed to the component with these repeated items
itemTypeIt corresponds to the unique name of the repeated Brick type (for example "feature-item")
itemLabel?Optional label used for the Add / Remove buttons. If none is provided, the repeated brick's label is used as fallback
getDefaultPropsSince 3.9.0 it is possible to specify a function that returns the default props for the repeated brick inside of this brick. For example, for a Button brick repeated inside a Form brick, you could specify that the default type should be "submit" instead of "link".
minMinimum number of repeated items allowed
maxMaximum number of repeated items allowed
positionLabelA label for the position where blocks will appear. Useful when you have multiple item types (see next prop).
itemsAllowed item types, when multiple. In this case itemType and min are not used. Each item has its own type, label, min and max and getDefaultProps.

Usage example

YourBrick.schema {
...
repeaterItems: [
{
name: 'buttons',
itemType: 'button',
itemLabel: 'Button',
min: 0,
max: 2,
},
],
...
}