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
Yes
An iterable that yields [key, item] pairs such as an ES2015 Map
renderItem
No
A render prop or HTML tagname string.
selectionModel
No
A string corresponding to a selection model.

Selection models

The selectionModel currently accepts the following values:

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"
/>;