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