Items

The Items component uses content in a data object to render a list of Item components.

It follows the Fragments pattern and returns its children without a wrapping element. This allows you to decide how you want to wrap your list of items.

The Items component is used as a direct child of the List component.

Props

Name Required Description
items check_box An iterable that yields [key, item] pairs such as an ES2015 Map
renderItem   A render prop or HTML tagname string.
selectionModel   A string corresponding to a selection model.

Selection models

The selectionModel currently accepts the following values:

  • radio (default)
  • checkbox

Example

import Items from '@magento/peregrine';

const data = {
    s: { id: 's', value: 'Small' },
    m: { id: 'm', value: 'Medium' },
    l: { id: 'l', value: 'Large' }
};

<Items
    items={Object.entries(data)}
    renderItem='option'
    selectionModel='checkbox'
/>