@react-md/list

@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 \
  @react-md/media

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import 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 = () => (
  <List>
    <ListItem id="item-1">Item 1</ListItem>
    <ListItem id="item-2" secondaryText="This is secondary text">
      Item 2 Primary Text
    </ListItem>
    <ListItem id="item-3" disabled>
      Item 3 Disabled
    </ListItem>
    <Divider />
    <ListSubheader>Sub actions</ListSubheader>
    <ListItem id="item-4" leftAddon={<FontIcon>close</FontIcon>}>
      Close
    </ListItem>
    <ListItem
      id="item-5"
      leftAddon={
        <Avatar
          src="https://picsum.photos/40?random"
          alt="A random image from https://picsum.photos"
        />
      }
      leftAddonType="avatar"
    >
      With Avatar
    </ListItem>
  </List>
);

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

Changelog

2.5.0 (2020-12-15)

Bug Fixes

• @react-md/form: better blur error cases for useNumberField (8b927ab)
• @react-md/form: fixed FormMessage counter prop-type validation (9ece3e1)
• @react-md/form: fixed messageProps error from react when disableMessage is enabled (e452aff)
• @react-md/form: Floating Label for controlled value Invalid numbers (ef1d764)
• @react-md/form: Maintain Floating Label for Invalid Numbers (2443f9a)
• @react-md/form: More fixes for number inputs being considered valued (1832e69)
• @react-md/form: updated TextField PropTypes to allow for search input type (23d92dd)
• @react-md/utils: GridCell now correctly uses largeDesktop when desktop is also provided (fd26b8b)
• @react-md/utils: nearest ensures min and max range for value (48181b3)
• @react-md/utils: updated nearest to support a custom range for sliders (6cfc67e)

Features

• @react-md/form: added a new useTextField hook to validate the TextField and TextArea values (578257c)
• @react-md/form: added a number-recommended type for validation (18c772e)
• @react-md/form: added a PasswordWithMessage component to be used with useTextField Hook (f6d84f2)
• @react-md/form: added a TextAreaWithMessage component to be used with useTextField Hook (e358799)
• @react-md/form: added a TextFieldWithMessage component to be used with useTextField Hook (f2d7e5d)
• @react-md/form: added a useNumberField hook to control number field values (c705f2c)
• @react-md/form: better defaults for validation (4003a07)
• @react-md/icon: added an error icon to the IconProvider Component and useIcon Hook (4dfd50a)
• @react-md/icon: added flexReverse prop to TextIconSpacing (c4ee05b)
• @react-md/utils: added a withinRange util for number validation (e8fb252)
• @react-md/utils: changed the default @include order for easier overrides (4705b09)