List

children

<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
<ListItem>Item 3</ListItem>
<ListItem>Item 4</ListItem>
<ListItem>Item 5</ListItem>
<ListItem>Item 6</ListItem>

<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
<ListItem>Item 3</ListItem>
<ListItem>Item 4</ListItem>
<ListItem>Item 5</ListItem>
<ListItem>Item 6</ListItem>

className

virtual

import * as React from "react";
import { List, ListItem } from "spaceweb/list";

export default () => {
  return (
    <List className="w-full border border-solid rounded-4 spr-border-01">
      <ListItem>Item 1</ListItem>
      <ListItem>Item 2</ListItem>
      <ListItem>Item 3</ListItem>
      <ListItem>Item 4</ListItem>
      <ListItem>Item 5</ListItem>
      <ListItem>Item 6</ListItem>
    </List>
  );
}

import * as React from "react";
import { List, ListItem } from "spaceweb/list";

export default () => {
  return (
    <List className="w-full border border-solid rounded-4 spr-border-01">
      <ListItem>Item 1</ListItem>
      <ListItem>Item 2</ListItem>
      <ListItem>Item 3</ListItem>
      <ListItem>Item 4</ListItem>
      <ListItem>Item 5</ListItem>
      <ListItem>Item 6</ListItem>
    </List>
  );
}

List Item

children

<ListItemText>Item</ListItemText>

<ListItemText>Item</ListItemText>

$as

startEnhancer

() => <span>🦊</span>

() => <span>🦊</span>

endEnhancer

<ChevronDown size={12} className="transform -rotate-90" />

<ChevronDown size={12} className="transform -rotate-90" />

alignItems

start

center

disabled

selected

highlighted

autoFocus

tooltipContent

'How are you?'

'How are you?'

button

onClick

className

import * as React from "react";
import { ListItem, ListItemText } from "spaceweb/list";
import ChevronDown from "spaceweb-icons/line/ChevronDown";

export default () => {
  return (
    <ListItem
      startEnhancer={() => <span>🦊</span>}
      endEnhancer={
        <ChevronDown
          size={12}
          className="transform -rotate-90"
        />
      }
      tooltipContent="How are you?"
      className="border border-solid rounded-4 spr-border-01"
    >
      <ListItemText>Item</ListItemText>
    </ListItem>
  );
}

import * as React from "react";
import { ListItem, ListItemText } from "spaceweb/list";
import ChevronDown from "spaceweb-icons/line/ChevronDown";

export default () => {
  return (
    <ListItem
      startEnhancer={() => <span>🦊</span>}
      endEnhancer={
        <ChevronDown
          size={12}
          className="transform -rotate-90"
        />
      }
      tooltipContent="How are you?"
      className="border border-solid rounded-4 spr-border-01"
    >
      <ListItemText>Item</ListItemText>
    </ListItem>
  );
}

List is a base component to render bunch of related items. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

Examples

Basic list

Item 1
Item 2
Item 3
Item 4

Divider in list

Item 1
Item 2
Item 3
Item 4

autoFocus prop usage

Play
Search
Close

autoFocus prop makes sure that item is focused on initial mount. tabIndex must be provided to make button focusable if it is not a focusable element by default. Can be used when items are rendered inside menu, it is more accessible if selected menu item is automatically focused when menu opens.

List Items with button prop

Item 1
Item 2
Item 3
Item 4

Hover styles are applied to the items with button prop. If button is true, item will be focusable and onClick will be called when item is focused and enter key is pressed

Disabled ListItem

Item 1
Item 2
Item 3
Item 4

Hover styles will not be applied to disabled items.

Usage with Enhancer

Play
Search
Close

Try clicking items.

SecondaryText in List

JD
Jane Doe
@jane_doe
JD
Jane Doe
@jane_doe
JD
Jane Doe
@jane_doe
JD
Jane Doe
@jane_doe

ListItemText can be used when text has multiple nodes. secondary can be any ReactNode and is useful to display any subtext. AvatarListItem is a wrapper on top of ListItem.

Subheader and divider in List

Sub Header 1
Play
Sub Header 2
Search
Close

Divider with title can be used to add subheader to the list. first prop can be used to not add top padding and border separator.

AlignItems usage

When there is multiline text, what should be the position of start enhancer. alignItems:start makes sure that start enhancer are stuck to the of the item.
When there is multiline text, what should be the position of start enhancer. alignItems:center makes sure that start enhancer is on the center of item.

For 1st item alignItems is start while 2nd item is rendered with center alignItems.

Virtualization

item number: 1
item number: 2
item number: 3
item number: 4
item number: 5
item number: 6
item number: 7
item number: 8
item number: 9
item number: 10
item number: 11

Setting virtual property for the List can enable virtualization. maxHeight and overflow must be provided to list or its container.

Check next example if overflow cannot be handled on List component.

Virtual List inside a container

item number: 1
item number: 2
item number: 3
item number: 4
item number: 5
item number: 6
item number: 7
item number: 8
item number: 9
item number: 10
item number: 11

When virtual list is wrapped inside a container, ref of the container must be passed to the scrollElement argument of the List

API

List props

Name	Type	Default	Description
$showFocusOutline	boolean		Adds outline on focus to the list
children	react node		List items
className	string		Classes to apply on List Root
estimateItemSize	number	34	Default size for items of virtual list
overrides	custom		Lets you customize all aspects of the component.
overscanCount	number	5	Set the number of over scanned children of the virtualized list
virtual	boolean	false	Add virtualization to list

List item props

Name	Type	Default	Description
$as	string	li	Modifies the base element used to render item.
alignItems	'start'\| 'center'	center	Vertical align of the enhancers.
autoFocus	boolean	false	Focus item on mount. Item should be focusable.
button	boolean	false	List item has a look and feel of button.
children	react node		Text/node to render inside item
className	string		Classes to apply on Item Root
disabled	boolean	false	Applies no-cursor and disabled styles to text.
endEnhancer	function		A component rendered at the end of the item.
highlighted	boolean	false	Applies hovered style to item if button is true.
onClick	function		click listener on list item. This will also be triggered if user presses enter when item is focused.
overrides	custom		Lets you customize all aspects of the component.
selected	boolean	false	Applies selected style to item.
startEnhancer	function		A component rendered at the start of the item.
tooltipContent	react node		The content of the tooltip. If provided, Listitem will be wrapped with StatefulTooltip.

You can check the implementation of the component for more details.

List exports

You can import this module like so:

import {AvatarListItem} from 'spaceweb/list'

It exports the following components or utility functions:

AvatarListItem
DEFAULT_LIST_ITEM_HEIGHT
DEFAULT_OVER_SCAN_COUNT
Divider
LIST_MIN_WIDTH
List
ListItem
ListItemText
StyledEndEnhancer
StyledList
StyledListItem
StyledListItemDivider
StyledStartEnhancer

🏁
Getting started

📖
Guides

📦
Packages

🖇
Components

📊
Charts