Skip to main content
List - Installation
Toggle Light/Dark ThemeView GitHubToggle right to left

# @react-md/list

Create lists of content that can have optional supplementary icons, avatars, or images placed with the text.

# Installation

$ npm install --save @react-md/list

It is also recommended to install the following packages as they normally work together well with lists:

$ npm install --save @react-md/theme \
    @react-md/typography \
    @react-md/divider \
    @react-md/avatar \
    @react-md/icon \

# Usage

1234567891011121314151617181920212223242526272829303132333435import React from "react";
import { render } from "react-dom";
import { Divider } from "@react-md/divider";
import { List, ListItem } from "@react-md/list";
import { FontIcon } from "@react-md/icon";

const App = () => (
    <ListItem id="item-1">Item 1</ListItem>
    <ListItem id="item-2" secondaryText="This is secondary text">
      Item 2 Primary Text
    <ListItem id="item-3" disabled>
      Item 3 Disabled
    <Divider />
    <ListSubheader>Sub actions</ListSubheader>
    <ListItem id="item-4" leftIcon={<FontIcon>close</FontIcon>}>
          alt="A random image from"
      With Avatar

render(<App />, document.getElementById("root"));