Edit in GitHubLog an issue

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

NameTypeDescription
propspropsReact Component props

props for List

Properties

NameTypeDescription
classesObjectcss classes prop for List
classes.rootstringcss classes for List root container
getItemKeyfuncitem key value getter
initialSelectionarray | objectA single or list of objects that should start off selected
itemsiterableAn iterable that yields [key, item] pairs such as an ES2015 Map
renderfunc | stringA render prop for the list element. A tagname string, such as "div", is also valid.
renderItemfunc | stringA render prop for the list item elements. A tagname string, such as "div", is also valid
onSelectionChangefuncA callback that fires when the selection state changes
selectionModelcheckbox | radioA 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 clipboard
1import { List } from '@magento/peregrine';
2
3const simpleData = new Map()
4 .set('s', 'Small')
5 .set('m', 'Medium')
6 .set('l', 'Large')
7
8<List
9 classes={{ root: 'foo' }}
10 items={simpleData}
11 render={'ul'}
12 renderItem={'li'}
13/>
14
15const complexData = new Map()
16 .set('s', { id: 's', value: 'Small' })
17 .set('m', { id: 'm', value: 'Medium' })
18 .set('l', { id: 'l', value: 'Large' })
19
20<List
21 classes={{ root: 'bar' }}
22 items={complexData}
23 render={props => (<ul>{props.children}</ul>)}
24 renderItem={props => (<li>{props.value}</li>)}
25/>
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.