List

The List control provides your component with an array where the values are controlled by a Makeswift control.

The List control can be nested as deeply as you want within List and Shape controls.

AnchorExamples

AnchorPopulating a list of testimonials

In this example we register a hypothetical Testimonials component which takes a testimonials prop. This prop expects an array of testimonial objects. We use the List control, together with Shape, TextInput, and TextArea controls to control the testimonials prop.

Testimonials list panel

import { ReactRuntime } from '@makeswift/runtime/react'
import { List, Shape, TextInput, TextArea } from '@makeswift/runtime/controls'
import { Testimonials } from '~/components'

ReactRuntime.registerComponent(Testimonials, {
  type: 'testimonials',
  label: 'Testimonials',
  props: {
    testimonials: List({
      label: 'Testimonials',
      type: Shape({
        type: {
          author: TextInput({ label: 'Author', defaultValue: '' }),
          quote: TextArea({ label: 'Quote', defaultValue: '' }),
        },
      }),
      getItemLabel(testimonial) {
        return testimonial?.author || 'Untitled'
      },
    }),
  },
})

AnchorAPI

AnchorParameters

ParameterTypeRequiredDefaultDescription
typeControlDefinitionyesN/AA control that determines the values in the array.
labelstringno'List'Text for the panel label.
getItemLabel(item: T) => stringnoundefinedA function to get the label for each list item shown in the panel.

Valid control values for the type parameter are the following:

AnchorProvided value

The List control provides an array value to your components where the items in the array are of the type provided by the control used in the type field. Each item's value will be determined by the associated control.