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

props for List

Properties

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

Last updated 5/26/2021

Was this helpful?

Yes

No