List

How to get List

import { List } from 'fds/components';

Type: Component

A default list that renders items vertically. This component should render ListItem components.

When a large amount of ListItem components are being rendered and render times and/or scrolling performance is poor, consider implementing a VirtualList instead.

Props

# Name Type Description
1. items Array<ItemWithId>
  ItemWithId

Type: Object

An item with an identifier property, used to distinguish items from each other.

In some cases, the key of the "id" property is configurable using a "itemKeyToUseAsId" prop.

Properties

Name Type Description
id String | Number

The unique identifier of the item, used to distinguish items from each other, eg. when determining the selected item. The value of this identifier should always be unique within a set of items.

2. [onItemClick] Function

A callback that is called whenever a rendered item is clicked and is not in a disabled state.


  Arguments
# Name Type Description
1. item Object

The clicked item.

3. [onItemDoubleClick] Function

A callback that is called whenever a rendered item is double clicked and is not in a disabled state.


  Arguments
# Name Type Description
1. item Object

The double clicked item.

4. [paddingSize] Number | String | Object

The amount of padding rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no padding at all)

  • 's' (small)

  • 'm' (medium)

  • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

Or you can pass an object whose properties determine a specific padding size for either:

  • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

  • 'vertical': %single size value% to set the 'top' and 'bottom' padding

Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

  Default value
"m"
5. renderItem Function

A callback that is called for each item in the items array, which should render an instance of ListItem.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
isSelected Boolean

Whether or not the component should be rendered in a selected state.

item Object

An item with an identifier property, used to distinguish items from each other.

In some cases, the key of the "id" property is configurable using a "itemKeyToUseAsId" prop.

  Members

Members

Name Type Description
id String | Number

The unique identifier of the item, used to distinguish items from each other, eg. when determining the selected item. The value of this identifier should always be unique within a set of items.

key *

A identifier used by React to distinguish items rendered from an iterator function. Should be set as the "key" property on a component instance. This should preferably be a unique key (like an "id" coming from a backend/CMS). When items are being reordered, React uses this key property to determine which items should be rerendered.

onClick Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
onDoubleClick Function

A callback that is called whenever the component is double clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
6. [selectedItem] Object

The item that is visually presented in a selected state. Expects an item in the same shape as expected by the "items" property.

  Default value
null

Related links

Was this page helpful?