@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

3.0.0 (2021-08-13)

This release should be relatively simple for most consumers of this library since the main breaking change is dropping support for node-sass and requiring sass since node sass has been deprecated as well as removing deprecated variables, hooks, and components. Most users should be able to run the following commands to upgrade to v3.0.0:

npm update react-md
npm uninstall node-sass
npm install sass

Or with yarn

yarn add react-md
yarn remove node-sass
yarn add sass

In addition, there is now partial support for the new Sass module system with the react-md package which also simplifies the import usage and has a slight build performance improvement for large projects. To start using the new module system, update all the @import statements as shown below:

-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
-// other react-md imports
+@use 'react-md' as *;

 // No other changes required!

If you override variables within react-md:

-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+  $rmd-theme-light: false,
+  $rmd-theme-primary: color.$rmd-theme-purple-500,
+  $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;

Check out the updated customizing your theme documentation, #1214, or 958f34f for more in-depth examples.

BREAKING CHANGES

• @react-md/theme: $rmd-theme-dark-elevation now defaults to true instead of false
• sass: node-sass is no longer supported and users must switch to sass
• @react-md/utils: Removed InteractionModeListener since it was an alias for UserInteractionModeListener
• @react-md/utils: Removed ResizeObserver component and useResizeObserverV1 implementation
• @react-md/tooltip: Removed TooltipHoverModeConfig component
• @react-md/card: Removed deprecated $rmd-card-dark-elevation-bordered-background-color variable
• @react-md/tooltip: Removed deprecated props from Tooltipped component
• @react-md/form: The second argument for useIndeterminateChecked is now an object of options

Bug Fixes

• sass: drop node-sass in favor of sass since it's deprecated (126fb5a)
• sass: use math.div instead of division since it's deprecated (d8c3f12)

Features

• @react-md/theme: $rmd-theme-dark-elevation defaults to true (b371337)
• react-md: Simplify sass usage with: @use 'react-md'; (787bfb5)

Documentation

• react-md.dev: removed documentation around pre-compiling styles (29b5d74)
• react-md.dev: Update Sass Documentation for @use (68e8c6b)
• react-md.dev: Updated sandboxes for new Sass module system (095ae97)

Other Internal Changes

• Added additional tests to bump test coverage (4d0371c)
• @react-md/card: removed deprecated $rmd-card-dark-elevation-bordered-background-color variable (01c9350)
• @react-md/dev-utils: Added simple sass-migrator command (a8e8df3)
• @react-md/dev-utils: autoConfirm flag passed to initBlog (dec09b8)
• @react-md/dev-utils: Combine all scss files into react-md/dist/_everything.scss (c7177e6)
• @react-md/dev-utils: Update release script to hopefully work with prereleases (e0ef881)
• @react-md/dev-utils: updated sassdoc and variables to use everything.scss (a0f0699)
• @react-md/dev-utils: updated variables command to work with sass (5376be1)
• @react-md/form: removed deprecated implementation in useIndeterminateChecked (6b7871f)
• @react-md/tooltip: removed deprecated props from Tooltipped component (6dca9b1)
• @react-md/tooltip: removed TooltipHoverModeConfig component (664ec30)
• @react-md/utils: remove ResizeObserver component and useResizeObserverV1 implementation (6a6b109)
• @react-md/utils: removed InteractionModeListener alias (216c8ef)
• examples: updated examples to latest dependencies (f2eb07a)
• react-md.dev: Each package includes a link to typedoc API in navigation tree (c388ba6)
• react-md.dev: ran migrator for deprecated division (98d2c58)
• react-md.dev: removed tilde from imports (6081e14)
• react-md.dev: update all scss files for @use imports (958f34f)
• react-md.dev: update all styles to use react-md/dist/everything (2da5033)
• react-md.dev: Update links for previous versions (2d0a0e6)
• react-md.dev: updated docs for new rmd-theme-dark-elevation defaults (b2269ff)
• react-md.dev: updated examples to work with sass instead of node-sass (d8ddf51)
• react-md.dev: updated sandboxes to use root react-md (c0f25f7)