List

Type: React component

How to get List?

JavaScript

import { List } from 'fds/components';

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

  1. items

    (Required)

    Type: Array<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

  2. onItemClick

    (Optional)

    Type: Function

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

    Arguments

    Default value

  3. onItemDoubleClick

    (Optional)

    Type: Function

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

    Arguments

    Default value

  4. paddingSize

    (Optional)

    Type: 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

  5. renderItem

    (Required)

    Type: Function

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

    Arguments

  6. selectedItem

    (Optional)

    Type: 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