VirtualList

Type: React component

A virtualized list of arbitrary items (set using the renderItem prop), which only renders the items that are visible within the "viewport" of the list. This behavior drastically increases the performance of a list with a lot of items (with high render costs). Optionally a "virtualBufferFactor" prop can be set to increase the amount of items being rendered off-screen.

Additionally, VirtualList supports scrolling items into view. By changing the "selectedItems" prop, VirtualList will scroll the last item from this array into view.

VirtualList renders a container that is stretched to the maximum available height using flexbox. Make sure the parent of VirtualList is a Flex component or is using the flex styling mixin.

Props

  1. animate

    (Optional)

    Type: Boolean

    Whether or not the items have a mount/unmount animation. When set to true and changing the "items" prop, it will merge in the next set of items and set additional properties on each item at specified times:

    • item.isAdded: set when the item has been added.

    • item.isRemoved: set when the item has been removed.

    • item.isMoved: set when the position of the item in the array has been moved.

    Additionally an "onItemIsRemoved" callback property is passed to the "renderItem" prop. This callback should be called when the unmount animation is done. This will result in the item being completely removed from the set of items in the state and eventually the DOM.

    Default value

  2. estimatedItemHeight

    (Required)

    Type: Number

    An estimation of the average height of the elements/components returned from "renderItem". VirtualList will use this to determine the height of the vertical scrollbar. When an item is measured, VirtualList will use the measured height instead of the estimated height.

  3. hasKeyboardBehavior

    (Optional)

    Default value

  4. itemKeyToUseAsId

    (Optional)

    Default value

  5. items

    (Required)

    Type: Array

    An arbitrary set of items, each item should at least include the property set as "itemKeyToUseAsId".

  6. maxHeight

    (Optional)

    Default value

  7. onItemClick

    (Optional)

    Default value

  8. onItemDoubleClick

    Default value

  9. onResize

    (Optional)

    Default value

  10. paddingSize

    (Optional)

    Default value

  11. renderItem

    (Required)

    Type: Function

    A callback that is called for each item in the items array which renders the item.

    Arguments

    Returns

  12. selectedItems

    (Required)

    Type: Array<FDS~SelectedItem>

    Default value

  13. spaceVerticalSize

    (Optional)

    Default value

  14. virtualBufferFactor

    (Optional)

    Default value