@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.8.0 (2021-04-22)

Bug Fixes

• @react-md/dialog: FixedDialog applies style prop (bb4ad2f)
• @react-md/utils: Click Behavior for Hover Mode (d0fda80)
• @react-md/utils: focusElementsWithin correctly focuses container element as a fallback (cff46c4)

Features

• @react-md/form: Implemented Form Menu Item Components (fed2b9f)
• @react-md/transition: Updated useFixedPositioning to merge style objects (1ab84d7)
• @react-md/transition: updated useFixedPositioning to support fixedTo ref (ced550a)
• @react-md/utils: Added isFocusable util (1d92472)
• @react-md/utils: implemented a reusable hover mode API (4f5ce2f)
• typescript: bump typescript version to v4.2.3 (b094b36)

Documentation

• @react-md/form: Updated form menu components for better documentation and examples in code (d9695b7)
• react-md.dev: Added Menu With Form Controls Demo (dbc2d21)
• react-md.dev: Added Tooltip Hook Example (9783c44)
• react-md.dev: Added a new Hover Mode demo (1e0e783)
• react-md.dev: Added Sticky Hover Mode Example (1a94a31)
• react-md.dev: additional Tooltip Hook documentation (5447f64)
• react-md.dev: fix documentation site deployment (9588c37)
• react-md.dev: removed custom nextjs server (8389b68)
• react-md.dev: Suppress hydration warning for App Size (c5a08da)
• react-md.dev: Updated documentation site after new tooltip behavior (5db9a9b)
• react-md.dev: Updated documentation site for new HoverModeProvider documentation (f42c65c)
• seo: Added missing description meta tag (3fd9e9f)

Other Internal Changes

• Moved documentation gitignore values to root (633a586)
• @react-md/form: Added new for menu item tests (5cf4f8a)
• @react-md/form: Created SwitchTrack and InputToggleIcon components (d9278b3)
• @react-md/form: moved some toggle styles into separate mixins (517f199)
• @react-md/form: simplified toggle icon styles (adb6b06)
• @react-md/form: Updated MenuItemRadio usage to be wrapped in a group for a11y (01caa0b)
• @react-md/form: Updated SliderValue to use non-portalled tooltip for existing test (b41136f)
• @react-md/layout: Updated Configuration to use new HoverModeProvider (357f2bf)
• @react-md/tooltip: Cleaned up some useTooltip code (0a6aed9)
• @react-md/tooltip: Updated Tooltip to use new Hover Mode (386f47b)
• @react-md/transition: bump @types/react-transitition-group from v4.2.4 to v4.4.1 (f3f5c7b)
• @react-md/utils: added missing since annotation to useOnUnmount (c758982)
• eslint: updated eslintignore so I can jump through errors quickly (7bfe9f3)
• react-md.dev: Fixed sandboxes to no longer require @types/classnames (32f6f0f)
• tsconfig: separate tsconfig by package instead of a single root (b278230)