List

A cross-platform React list component that provides semantic list structure with optional title sections and interactive rows. Supports hover states and keyboard navigation.

Installation

npm install @xsolla/xui-list
# or
yarn add @xsolla/xui-list

Demo

Basic List

import * as React from 'react';
import { List } from '@xsolla/xui-list';

export default function BasicList() {
  return (
    <List>
      <List.Row>Item 1</List.Row>
      <List.Row>Item 2</List.Row>
      <List.Row>Item 3</List.Row>
    </List>
  );
}

With Title Sections

import * as React from 'react';
import { List } from '@xsolla/xui-list';

export default function SectionedList() {
  return (
    <List>
      <List.Title>Fruits</List.Title>
      <List.Row>Apple</List.Row>
      <List.Row>Banana</List.Row>
      <List.Row>Cherry</List.Row>
      <List.Title>Vegetables</List.Title>
      <List.Row>Carrot</List.Row>
      <List.Row>Broccoli</List.Row>
    </List>
  );
}

Hoverable Rows

import * as React from 'react';
import { List } from '@xsolla/xui-list';

export default function HoverableList() {
  return (
    <List>
      <List.Row hoverable>Hoverable row 1</List.Row>
      <List.Row hoverable>Hoverable row 2</List.Row>
      <List.Row hoverable>Hoverable row 3</List.Row>
    </List>
  );
}

Clickable Rows

import * as React from 'react';
import { List } from '@xsolla/xui-list';

export default function ClickableList() {
  const handleClick = (item: string) => {
    console.log('Clicked:', item);
  };

  return (
    <List>
      <List.Row onClick={() => handleClick('Item 1')}>Click me - Item 1</List.Row>
      <List.Row onClick={() => handleClick('Item 2')}>Click me - Item 2</List.Row>
      <List.Row onClick={() => handleClick('Item 3')}>Click me - Item 3</List.Row>
    </List>
  );
}

Anatomy

import { List } from '@xsolla/xui-list';

<List>
  <List.Title>Section Header</List.Title>   {/* Section title */}
  <List.Row                                 {/* List item */}
    hoverable={false}                       // Show hover background
    onClick={handleClick}                   // Click handler
    onPress={handlePress}                   // Press handler (RN)
  >
    Row Content
  </List.Row>
</List>

Examples

Settings Menu

import * as React from 'react';
import { List } from '@xsolla/xui-list';
import { Cell } from '@xsolla/xui-cell';
import { User, Bell } from '@xsolla/xui-icons';
import { ChevronRight, Shield } from '@xsolla/xui-icons-base';

export default function SettingsMenu() {
  return (
    <List>
      <List.Title>Account</List.Title>
      <List.Row onClick={() => console.log('Profile')}>
        <Cell>
          <Cell.Slot><User size={20} /></Cell.Slot>
          <Cell.Content>Profile</Cell.Content>
          <Cell.Slot><ChevronRight size={16} /></Cell.Slot>
        </Cell>
      </List.Row>
      <List.Row onClick={() => console.log('Security')}>
        <Cell>
          <Cell.Slot><Shield size={20} /></Cell.Slot>
          <Cell.Content>Security</Cell.Content>
          <Cell.Slot><ChevronRight size={16} /></Cell.Slot>
        </Cell>
      </List.Row>
      <List.Title>Preferences</List.Title>
      <List.Row onClick={() => console.log('Notifications')}>
        <Cell>
          <Cell.Slot><Bell size={20} /></Cell.Slot>
          <Cell.Content>Notifications</Cell.Content>
          <Cell.Slot><ChevronRight size={16} /></Cell.Slot>
        </Cell>
      </List.Row>
    </List>
  );
}

Selection List

import * as React from 'react';
import { List } from '@xsolla/xui-list';
import { Radio } from '@xsolla/xui-radio';

export default function SelectionList() {
  const [selected, setSelected] = React.useState('option1');

  return (
    <List>
      <List.Row onClick={() => setSelected('option1')}>
        <Radio checked={selected === 'option1'} />
        <span style={{ marginLeft: 12 }}>Option 1</span>
      </List.Row>
      <List.Row onClick={() => setSelected('option2')}>
        <Radio checked={selected === 'option2'} />
        <span style={{ marginLeft: 12 }}>Option 2</span>
      </List.Row>
      <List.Row onClick={() => setSelected('option3')}>
        <Radio checked={selected === 'option3'} />
        <span style={{ marginLeft: 12 }}>Option 3</span>
      </List.Row>
    </List>
  );
}

API Reference

List

Container component for list items.

List Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | List rows and titles. |

List.Row

Individual list item component.

List.Row Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Row content. | | hoverable | boolean | false | Show hover background effect. | | onClick | () => void | - | Click handler (web). | | onPress | () => void | - | Press handler (React Native). |

List.Title

Section title component.

List.Title Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Title text. |

Keyboard Navigation

| Key | Action | | :-- | :----- | | Enter | Activate row (when onClick/onPress set) | | Space | Activate row (when onClick/onPress set) |

Accessibility

• List uses role="list" semantically
• Rows use role="listitem"
• Interactive rows are focusable with tabIndex={0}
• Keyboard navigation with Enter/Space to activate