List
A component for generating a list component.
Typedefs
- props
props for List
- defaultProps
default props for 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 | 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
Copied to your clipboardimport { List } from '@magento/peregrine';const simpleData = new Map().set('s', 'Small').set('m', 'Medium').set('l', 'Large')<Listclasses={{ 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' })<Listclasses={{ root: 'bar' }}items={complexData}render={props => (<ul>{props.children}</ul>)}renderItem={props => (<li>{props.value}</li>)}/>