• Log inStart now

List

Usage

import { List } from 'nr1'

Examples

Props

childrenrequirednode|function

It can be either an array of <ListItem> elements or a render callback (Function as Children). The recommendation is to use the render callback since it will virtualize all the items, making it very fast when a large numer of items is provided.

When using the render callback items need to be provided through the items prop.

classNamestring

Classname for custom styling.

fullHeightboolean
DEFAULT
false

Expands the stack to occupy all available height.

fullWidthboolean
DEFAULT
false

Expands the stack to occupy all available width.

itemsany[]
DEFAULT
[]

The items to be used when rendering.

They are required when rendering items with a render callback.

Each item can have any structure and type possible, and will the corresponding one will be provided when rendering each element list.

onLoadMorefunction

Callback fired when more items must be loaded. This happens when you're lazy loading the items and the items that are about to render cannot be found in the items array.

This callback should be used to fetch/load the missing items from the backend or other sources.

The returned Promise should be resolved once item data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event.

function (
cursor: Cursor

Items to load.

)
rowCountnumber

Number of rows.

By default it's equal to length of array passed in the items prop.

You should specify the rowCount when you know the total number of items but you want to lazy load them while scrolling.

rowHeightrequirednumber

Height of the list row.

Required when rendering items with the render callback (Function as Children). This is a provisional height until the cell content is measured by temporarily rendering it in a way that is not visible to the user.

spacingTypeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of
<One of
List.SPACING_TYPE.EXTRA_LARGE,
List.SPACING_TYPE.LARGE,
List.SPACING_TYPE.MEDIUM,
List.SPACING_TYPE.NONE,
List.SPACING_TYPE.OMIT,
List.SPACING_TYPE.SMALL,
>
>
styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

widthstring
DEFAULT
auto

Represents the width of the list. It is always a string, and it can be of one of the following types:

  • 'fit-content': Enables auto-sizing of the <List> container. Intended for use with virtualised <List>s to ensure the container fits the width of the widest <ListItem>. Resizes as more items are loaded by the <List> component. Does not affect the height of the <List> component, which will continue to fit the height of the container the <List> component is in.

  • 'auto': The default value for <List>. This prompts the <List> component to size according to its default styling, allowing it to expand to fill the width and height of its container. Content is then sized to fit the resulting width of the <List> component.

Type definitions

RenderCallbackArguments

{
item: any,

Item to render.

index: number,

Index of the item in the items array.

items: any[],

Array of items which we're iterating on.

}

Cursor

{
startIndex: number,

First index of the range of items to load.

stopIndex: number,

Last index of the range of items to load.

}
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.