List

Typedefs

props
props for [List](#List)
defaultProps
default props for [List](#List)

The List component maps a collection of data objects into an array of elements. It also manages the selection and focus of those elements.

Returns{react.element}: A React component that displays list data.
Parameters

Name Type Description
props props React Component props

props for List

Properties

Name Type Description
classes Object css classes prop for List
classes.root string css classes for List root container
getItemKey func item key value getter
initialSelection array | object A single or list of objects that should start off selected
items iterable An iterable that yields [key, item] pairs such as an ES2015 Map
render func | string A render prop for the list element. A tagname string, such as "div", is also valid.
renderItem func | string A render prop for the list item elements. A tagname string, such as "div", is also valid
onSelectionChange func A callback that fires when the selection state changes
selectionModel checkbox | radio A string corresponding to a selection model

default props for List

Source Code: pwa-studio/packages/peregrine/lib/List/list.js

Selection models

The selectionModel currently accepts the following values:

  • radio (default)
  • checkbox

Example


import { List } from '@magento/peregrine';

const simpleData = new Map()
    .set('s', 'Small')
    .set('m', 'Medium')
    .set('l', 'Large')

<List
    classes={{ root: 'foo' }}
    items={simpleData}
    render={'ul'}
    renderItem={'li'}
/>

const complexData = new Map()
    .set('s', { id: 's', value: 'Small' })
    .set('m', { id: 'm', value: 'Medium' })
    .set('l', { id: 'l', value: 'Large' })

<List
    classes={{ root: 'bar' }}
    items={complexData}
    render={props => (<ul>{props.children}</ul>)}
    renderItem={props => (<li>{props.value}</li>)}
/>