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>)}
/>