Repeater

Wherever you need to have a repeating set of bricks inside your brick, you can use the <Repeater> component.
In it's simplest form it is just <Repeater propName="...">. You can have infinite nesting levels using Repeaters inside of repeated bricks. You can also have more than one type of brick repeated in a Repeater.

See Nested blocks.

📌

For usage with Next /App Router, please read the React Server Components Guide.

Properties

interface RepeaterProps {
  propName: string
  itemProps?: types.Props
  renderWrapper?: (items: React.ReactElement) => React.ReactElement
  renderItemWrapper?: (
    item: React.ReactElement,
    index?: number,
    itemsCount?: number
  ) => React.ReactElement
}

Properties definition

Property	Definition
propName	Name of the prop containing the repeated items (should match the one in the repeaterItems schema property)
itemProps?	Optional object with props passed to all the items (for example a global configuration that is the same for all the items).
renderWrapper?	Optional function taking items as an argument. It should return JSX that wraps the items. Rendered only if there is at least one repeated item.
renderItemWrapper?	Optional wrapper around each item. Has item, index and itemsCount as arguments and should return JSX

Usage example

<Repeater
  propName="buttons"
  renderWrapper={(items) => (
    <div className="flex justify-center items-center">{items}</div>
  )}
/>