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="...">.

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

PropertyDefinition
propNameName 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>
  )}
/>