Repeater

Renders the items of a repeater field. Within each rendered item, the field hooks read the fields of this item, so each item can be implemented like a widget of its own.

function Repeater(props: {field: string; children: (item: RepeaterFieldBaseData, index: number) => ReactNode}): JSX.Element

Props

Prop	Type	Description
field	string	The name of the repeater field.
children	(item: RepeaterFieldBaseData, index: number) => ReactNode	Renders an item. item contains the raw values of the item's fields (Record<string, unknown>).

Example

src/widgets/example/Example.tsx

import React from 'react'
import {Repeater, useFormattedMetricValue, useMetricField, useStringField} from '@modbros/dashboard-sdk'

const Item = () => {
  // The field hooks read the fields of the current item
  const label = useStringField({field: 'label'})
  const channelValue = useMetricField({field: 'metric'})
  const formatted = useFormattedMetricValue(channelValue, {precision: 0})

  return (
    <li>
      {label}: {formatted?.value} {formatted?.unit}
    </li>
  )
}

export default function Example() {
  return (
    <ul>
      <Repeater field="items">{(item, index) => <Item key={index}/>}</Repeater>
    </ul>
  )
}

To share data between items, e.g. to scale all bars of a chart to the largest value, use a store or a throttled data context.