open-index/open-npm huggingface dataset:
npm package: @react-materials/ability-introduction-block
Description: 产品能力介绍
Author: wssgcg1213
Latest version: 0.1.4

# ability-introduction

简介：产品能力介绍

产品能力介绍

![截图](https://gw.alicdn.com/tfs/TB1T_OutDtYBeNjy1XdXXXXyVXa-2458-1186.png)
npm package: @react-materials/account-badge-block
Description: 展示账户权益勋章等权益信息
Author: noyobo
Latest version: 1.0.3

# account-badge

简介：账户勋章

展示账户权益勋章等权益信息

![截图](https://img.alicdn.com/tfs/TB18PFFfxtnkeRjSZSgXXXAuXXa-1866-378.png)
npm package: @react-materials/account-features-block
Description: 罗列账户功能列表
Author: noyobo
Latest version: 1.0.4

# account-features

简介：账户特性

罗列账户功能列表

![截图](https://img.alicdn.com/tfs/TB1Z_J9pj7nBKNjSZLeXXbxCFXa-1868-1218.png)
npm package: @react-materials/account-panel-block
Description: 用户中心展示账户信息内容
Author: noyobo
Latest version: 1.0.4

# account-panel

简介：账户信息

用户中心展示账户信息内容

![截图](https://img.alicdn.com/tfs/TB1lXJfpr3nBKNjSZFMXXaUSFXa-1868-788.png)
npm package: @react-materials/account-status-block
Description: 展示账户标识以及操作等
Author: noyobo
Latest version: 1.0.2

# account-status

简介：账户状态

展示账户标识以及操作等

![截图](https://img.alicdn.com/tfs/TB1lcWrpaQoBKNjSZJnXXaw9VXa-2020-374.png)
npm package: @react-materials/data-overview-block
Description: 基础数据概览
Author: noyobo
Latest version: 1.0.2

# data-overview

简介：数据概览

基础数据概览

![截图](https://img.alicdn.com/tfs/TB1.f71piAnBKNjSZFvXXaTKXXa-1868-454.png)
npm package: @react-materials/dn-d-block
Description: 元素拖拽放置
Author: ICE Team
Latest version: 1.0.2

# DnD

简介：可拖拽的卡片

元素拖拽放置

![截图](https://img.alicdn.com/tfs/TB1eOefG3mTBuNjy1XbXXaMrVXa-2410-674.png)
npm package: @react-materials/excellent-home-page-block
Description: 简洁大气首页
Author: zhuoling.lcl@alibaba-inc.com
Latest version: 0.1.2

# excellent-home-page

简介：简洁大气首页

home page block

![截图](https://gw.alicdn.com/tfs/TB1l0KttDtYBeNjy1XdXXXXyVXa-2770-1540.png)
npm package: @react-materials/hot-post-rank-block
Description: 展示文章阅读热度排行
Author: noyobo
Latest version: 1.0.2

# hot-post-rank

简介：hot-post-rank

展示文章阅读热度排行

![截图](https://img.alicdn.com/tfs/TB1lOrNkwZC2uNjSZFnXXaxZpXa-1866-698.png)
npm package: @react-materials/hot-rank-block
Description: 展示关键词、关键点热度
Author: noyobo
Latest version: 1.0.2

# hot-rank

简介：hot-rank

展示关键词、关键点热度

![截图](https://img.alicdn.com/tfs/TB1LJ08pcUrBKNjSZPxXXX00pXa-1866-1112.png)
npm package: @react-materials/industry-banner-block
Description: 行业专区的图文介绍
Author: 思忠
Latest version: 1.0.2

# industry-banner

简介：行业图文介绍

![截图](https://img.alicdn.com/tfs/TB1lj3RteuSBuNjy1XcXXcYjFXa-2868-468.png)
npm package: @react-materials/infinite-scroll-cell-measurer-block
Description: 无限滚动的表格
Author: ICE Team
Latest version: 1.0.1

# infinite-scroll-cell-measurer

简介：InfiniteScrollCellMeasurer

无限滚动的表格

![截图](https://img.alicdn.com/tfs/TB1tlWrGHGYBuNjy0FoXXciBFXa-3450-860.png)
npm package: @react-materials/infinite-scroll-grid-block
Description: 无限滚动的栅格列表
Author: ICE Team
Latest version: 1.0.1

# infinite-scroll-grid

简介：InfiniteScrollGrid

无限滚动的栅格列表

![截图](https://img.alicdn.com/tfs/TB1kyB1GKOSBuNjy0FdXXbDnVXa-3418-632.png)
npm package: @react-materials/infinite-scroll-list-block
Description: 无限滚动列表
Author: ICE Team
Latest version: 1.0.1

# infinite-scroll-list

简介：无限滚动列表

无限滚动列表

![截图](https://img.alicdn.com/tfs/TB1F8wmGGmWBuNjy1XaXXXCbXXa-3442-600.png)
npm package: @react-materials/intro-tab-block
Description: 展示多种情况下的信息
Author: muchen
Latest version: 1.0.2

# intro-tab

简介：introduction tabs

展示多种情况下的信息

![截图](https://img.alicdn.com/tfs/TB1lg7gux1YBuNjy1zcXXbNcXXa-2878-1604.png)
npm package: @react-materials/map-with-a-info-window
Description: Map With A Info Window
Author: yuanyan
Latest version: 0.1.2

# map-with-a-info-window

简介：地图信息窗口

地图信息窗口

![截图](https://img.alicdn.com/tfs/TB1eaNyCwmTBuNjy1XbXXaMrVXa-2054-794.png)
npm package: @react-materials/map-with-a-marker
Description: Map With A Marker
Author: yuanyan
Latest version: 0.1.2

# map-with-a-maker

简介：地图位置标记

地图位置标记

![截图](https://img.alicdn.com/tfs/TB1rtgvCDtYBeNjy1XdXXXXyVXa-2058-802.png)
npm package: @react-materials/notice-list-block
Description: 展示站点公告列表
Author: noyobo
Latest version: 1.0.2

# notice-list

简介：公告列表

展示站点公告列表

![截图](https://img.alicdn.com/tfs/TB1PzsRpbZnBKNjSZFGXXbt3FXa-1868-1374.png)
npm package: @react-materials/post-category-block
Description: 文章创作类型列表
Author: noyobo
Latest version: 1.0.1

# post-category

简介：post-category

文章创作类型列表

![截图](https://img.alicdn.com/tfs/TB1e.V8pbwrBKNjSZPcXXXpapXa-1868-1458.png)
npm package: @react-materials/scroll-list-block
Description: 滚动分页列表
Author: ICE Team
Latest version: 1.0.1

# scroll-list

简介：ScrollList

滚动分页列表

![截图](https://img.alicdn.com/tfs/TB1WAQmGGmWBuNjy1XaXXXCbXXa-3442-990.png)
npm package: @react-materials/simple-transfer-block
Description: 简单的穿梭框面板展示
Author: 思忠
Latest version: 1.0.2

# simple-transfer

简介：穿梭框

简单的穿梭框面板展示

![截图](https://img.alicdn.com/tfs/TB1RpPQCAyWBuNjy0FpXXassXXa-2422-548.png)
npm package: @react-materials/slide-banner-block
Description: 滑动banner 用于层叠展示
Author: muchen
Latest version: 1.0.2

# slide-banner

简介：滑动Banner

滑动banner 用于层叠展示

![截图](https://img.alicdn.com/tfs/TB1bNu1uDtYBeNjy1XdXXXXyVXa-2876-768.png)
npm package: @react-materials/tree-table-block
Description: tree和选择混合表格
Author: ICE Team
Latest version: 1.0.1

# tree-table

简介：树状表格

tree 和选择混合表格

![截图](https://img.alicdn.com/tfs/TB1xDkQuuySBuNjy1zdXXXPxFXa-2872-1096.png)
npm package: @react-materials/user-landing-block
Description: 展示用户相关信息、等级等
Author: noyobo
Latest version: 1.0.2

# user-landing

简介：用户欢迎信息

展示用户相关信息、等级等

![截图](https://img.alicdn.com/tfs/TB1auxWpaAoBKNjSZSyXXaHAVXa-1868-208.png)
npm package: @react-materials/user-profile-card-block
Description: 用于展示用户详细信息的卡片
Author: 思忠
Latest version: 1.0.2

# user-profile-card

简介：用户信息卡片

用于展示用户详细信息的卡片

![截图](https://img.alicdn.com/tfs/TB1oSydCTtYBeNjy1XdXXXXyVXa-2870-428.png)
npm package: @react-md/alert
Description: Create accessible alerts through snackbars and banners.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/alert

Create accessible alerts that can be displayed to users in your app. This
package provides a `MessageQueue` for showing messages and a `useAddMessage`
hook to push alerts into the queue.

## Installation

```sh
npm install --save @react-md/alert
```

It is generally recommended to also install the following packages since they
work hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/button
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/alert/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

`src/index.tsx`

```tsx
import { render } from "react-dom";
import { MessageQueue } from "@react-md/alert";

import App from "./App";

render(
  <MessageQueue id="main-alerts">
    <App />
  </MessageQueue>,
  document.getElementById("root")
);
```

`src/App.tsx`

```tsx
import type { ReactElement } from "react";
import { useAddMessage } from "@react-md/alert";
import { Button } from "@react-md/button";

function App(): ReactElement {
  const addMessage = useAddMessage();

  return (
    <Button
      id="button-1"
      onClick={() => addMessage({ children: "Example Message" })}
    >
      Show Message
    </Button>
  );
}

export default App;
```
npm package: @react-md/app-bar
Description: This small package implments the AppBar spec in material design.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/app-bar

This package is used to create a top-level fixed app bar in your application to
display some sort of navigation button like a hamburger menu, your app title
and/or logo, as well as any top-level actions for your app. You can also use
this component to create toolbars or other header elements for different
sections of your app.

## Installation

```sh
npm install --save @react-md/app-bar
```

It is generally recommended to also install the following packages since they
work hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/button \
  @react-md/icon
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/app-bar/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

The primary use of this package is to create a fixed header that includes your
app's logo, title, mobile navigation, or common actions. Here's a quick example:

```tsx
import { render } from "react-dom";
import {
  AppBar,
  AppBarTitle,
  AppBarNav,
  AppBarAction,
  APP_BAR_OFFSET_CLASSNAME,
} from "@react-md/app-bar";
import { MenuSVGIcon, SearchSVGIcon } from "@react-md/material-icons";

const App = () => {
  const mobile = window.innerWidth < 600;

  return (
    <>
      <AppBar id="main-app-bar" fixed>
        {mobile && (
          <AppBarNav id="main-mobile-navigation" aria-label="Mobile navigation">
            <MenuSVGIcon />
          </AppBarNav>
        )}
        {<AppBarTitle keyline={!mobile}>My Company's Name</AppBarTitle>}
        <AppBarAction id="search" aria-label="Search">
          <SearchSVGIcon />
        </AppBarAction>
      </AppBar>
      <main className={APP_BAR_OFFSET_CLASSNAME}>
        <h3>Hello, world!</h3>
      </main>
    </>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/autocomplete
Description: Create an accessible autocomplete component that allows a user to get real-time suggestions as they type within an input. This component can also be hooked up to a backend API that handles additional filtering or sorting.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/autocomplete

Create an accessible autocomplete component that allows a user to get real-time
suggestions as they type within an input. This component can also be hooked up
to a backend API that handles additional filtering or sorting.

## Installation

```sh
npm install --save @react-md/autocomplete
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/autocomplete/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

The `AutoComplete` component just requires:

- an `id` to identify the field (required for a11y)
- a list of `data` that can be a list of `string`, `number`, or `object`

However, it is recommended to also provide a `label` and `placeholder` text to
help the user understand this component.

```tsx
import { AutoComplete } from "@react-md/autocomplete";

const fruits = [
  "Apple",
  "Apricot",
  "Banana",
  "Blueberry",
  "Cranberry",
  "Kiwi",
  "Peach",
  "Plum",
  "Strawberry",
];

function Example() {
  return (
    <AutoComplete
      id="search-fruits"
      name="fruits"
      label="Fruits"
      placeholder="Kiwi..."
      data={fruits}
    />
  );
}
```
npm package: @react-md/avatar
Description: This package is used to avatars which are used to symbolize people or objects.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/avatar

Create avatars to represent people or objects with images, icons, or text.
Different theme colors can also be applied for icons or text.

## Installation

```sh
npm install --save @react-md/avatar
```

It is generally recommended to also install the following packages since they
work hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/icon
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/avatar/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

One of the main use-cases will probably be to display a list of people with
specific avatars with them:

```tsx
import { render } from "react-dom";
import { Avatar } from "@react-md/avatar";
import { List, ListItem } from "@react-md/list";

const people = [
  { name: "Logan Tyler", avatarUrl: "https://some-picture.com" },
  { name: "Trenton Berry", avatarUrl: "https://some-picture.com" },
  { name: "Damon Fletcher", avatarUrl: "https://some-picture.com" },
  { name: "Thomas Owen", avatarUrl: "https://some-picture.com" },
  { name: "Charity Henderson", avatarUrl: "https://some-picture.com" },
];

const App = () => (
  <List>
    {people.map(({ name, avatarUrl }, i) => (
      <ListItem
        id={`person-${i}`}
        key={i}
        leftAddon={<Avatar src={avatarUrl} alt={`${name}'s avatar'`} />}
        leftAddonType="avatar"
      >
        {name}
      </ListItem>
    ))}
  </List>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/badge
Description: Create a badge that is fixed to another element. This is generally used for notification counts.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/badge

A badge is a floating element that is normally fixed to another element to add
additional information. The biggest use-case for a badge is to show a count of
notifications.

## Installation

```sh
npm install --save @react-md/badge
```

If you would also like dynamic themes and general typography, it is recommended
to also install:

```sh
npm install --save @react-md/theme \
  @react-md/typography
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/badge/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import { BadgedButton } from "@react-md/badge";

const App = () => <BadgedButton id="notifications">3</BadgedButton>;

render(<App />, document.getElementById("root"));
```
npm package: @react-md/card
Description: Create interactable cards from the material design specifications.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/card

This package is for creating interactable cards from the material design
guidelines.

## Installation

```sh
npm install --save @react-md/card
```

It is also recommended to install the following packages as they work
hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/media \
  @react-md/avatar \
  @react-md/button \
  @react-md/transition
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/card/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { Fragment } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Card, CardHeader, CardTitle, CardSubtitle, CardActions } from "@react-md/card"
import { Typography } from "@react-md/typography"

const App = () => (
  <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
    </CardHeader>
    <CardContent>
      <Typography>Here is some text to display in the card. It is
    </CardContent>
    <CardActions>
      <Button>Action 1</Button>
      <Button<Action 2</Button>
    </CardActions>
  </Card>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/chip
Description: Create a compact actionable element that can be used to represent an input, attribute, or action. A chip can be used to represent filters, tags, emails, or other inline elements.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/chip

Create a compact actionable element that can be used to represent an input,
attribute, or action. A chip can be used to represent filters, tags, emails, or
other inline elements.

## Installation

```sh
npm install --save @react-md/chip
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/chip/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import type { ReactElement } from "react";
import { Chip } from "@react-md/chip";

export default function Example(): ReactElement {
  return <Chip id="example-chip-1">I'm a chip!</Chip>;
}
```
npm package: @react-md/codemod
Description: ReactMD codemod scripts
Author: Mikkel Laursen
Latest version: 6.0.2

# @react-md/codemod

This repository contains a collection of codemod scripts for use with
[JSCodeshift](https://github.com/facebook/jscodeshift) that help update ReactMD
APIs.

> Note: If you use [prettier](https://prettier.io/), you will most likely need
> to re-format your files after running a codemod.

## Usage

```sh
Usage: npx @react-md/codemod [options] [command]

Run a codemod script to update to the latest version of ReactMD.

 Running this script without any options or commands will start an interactive wizard.


Options:
  -d, --dry                                    Dry run (no changes are made to files) (default: false)
  -p, --print                                  Print transformed files to your terminal (default: false)
  --parser <parser>                            The file parser to use. (choices: "babel", "tsx", "", default: "")
  --jscodeshift <jscodeshift>                  (Advanced) Pass options directly to jscodeshift (default: "")
  -h, --help                                   display help for command

Commands:
  v3-to-v4/preset [options] [files...]
  v5-to-v6/prerequisites/to-react-md [options] [files...]
```

## Transformations

- [v5-to-v6](./src/transforms/v5-to-v6/README.md)
- [v3-to-v4](./src/transforms/v3-to-v4/README.md)
npm package: @react-md/core
Description: The core components and functionality for react-md.
Author: Mikkel Laursen
Latest version: 7.0.3

# @react-md/core

Create an accessible React application with the [material design specifications]
and SCSS.

Check out the [documentation website] for demos, configuration guides,
and other documentation.

## [Installation]

```sh
npm install @react-md/core sass

# optionally install material icons as well
npm install @react-md/material-icons
```

```sh
yarn add @react-md/core sass

# optionally install material icons as well
yarn add @react-md/material-icons
```

```sh
pnpm add @react-md/core sass

# optionally install material icons as well
pnpm add @react-md/material-icons
```

## Typescript

The library is written and maintained in [Typescript] and it is recommended to
use in your application as well since there is no runtime type checking for
React props that cannot be caught by Typescript.

[typescript]: https://www.typescriptlang.org/
[installation]: https://react-md.dev/getting-started/installation
[documentation website]: https://react-md.dev
[material design specifications]: https://material.io/design/
npm package: @react-md/dialog
Description: This package is used to create accessible dialogs and modals.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/dialog

Create fully accessible dialogs that can span the entire page, centered within
the viewport, or positioned anywhere. The dialogs can also act as a modal so
that the user **must** press one of the actions to close the dialog instead of
closing by pressing the background overlay.

The main accessibility features and other features for dialogs are:

- automatically managing focus to and from the dialog when it mounts
- allowing a user key press the escape key to close the dialog
- applying the required roles and `aria-*` attributes
- adding additional prominence to the dialog with the `alertdialog` role as
  needed (see docs for this one)
- conditionally portaling the dialogs to help with overflow issues and other
  display errors
- disabling scroll for the main window while a dialog is visible

## Installation

```sh
npm install --save @react-md/dialog
```

This package also goes great with the following packages:

```sh
npm install --save @react-md/theme \
  @react-md/utils \
  @react-md/typography \
  @react-md/button \
  @react-md/app-bar
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/dialog/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Example

This package exports multiple components to create your dialog as well as a
context component for handling multiple dialogs at once within your page.

```tsx
import { render } from "react-dom";
import { Button } from "@react-md/button";
import {
  Dialog,
  DialogHeader,
  DialogTitle,
  DialogContent,
  DialogFooter,
} from "@react-md/dialog";
import { useToggle } from "@react-md/utils";

const App = () => {
  return (
    <>
      <Button id="dialog-toggle" onClick={enable}>
        Show Dialog
      </Button>
      <Dialog
        id="main-dialog"
        visible={visible}
        onRequestClose={disable}
        aria-labelledby="main-dialog-title"
      >
        <DialogHeader>
          <DialogTitle id="main-dialog-title">My Dialog</DialogTitle>
        </DialogHeader>
        <DialogContent>This is some content.</DialogContent>
        <DialogFooter>
          <Button id="main-dialog-close" onClick={disable}>
            Close
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/divider
Description: This package is used to create horizontal or vertical dividers in your application.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/divider

Dividers group and separate content within lists and page layouts. The divider
is a thin rule, lightweight yet sufficient to distinguish content visually and
spatially.

## Installation

```sh
npm install --save @react-md/divider
```

This package is not super helpful on its own, so it is recommended to also
install the following packages:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/icon
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/divider/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

One of the main use-cases will probably be to display a list with specific
dividers or to add dividers between page elements:

```tsx
import { render } from "react-dom";
import { Divider } from "@react-md/divider";
import { List, ListItem } from "@react-md/list";
import { Typography } from "@react-m/typography";

const App = () => (
  <main>
    <div className="section-1">
      <Typography>Here is some text.</Typography>
    </div>
    <Divider />
    <div className="section-2">
      <Typography>Here is some more text.</Typography>
    </div>
    <List>
      <ListItem id="item-1">Item 1</ListItem>
      <ListItem id="item-2">Item 2</ListItem>
      <ListItem id="item-3">Item 3</ListItem>
      <ListItem id="item-4">Item 4</ListItem>
      <Divider />
      <ListItem id="item-5">Item 5</ListItem>
    </List>
  </main>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/elevation
Description: This is a small package for react-md that can create the elevation styles in the material design spec.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/elevation

This is a small package for react-md that can create the elevation styles in the
material design spec. Unlike the other `react-md` packages, this package only
exports utility mixins and does not provide any React components or any default
styles.

## Installation

```sh
npm install --save @react-md/elevation
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/elevation/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

Material design has 24 different elevation types and the `rmd-elevation` mixin
accepts a number between 0 and 24 to create that elevation.

```scss
@import "@react-md/elevation/dist/mixins";

.my-elevated-component {
  @include rmd-elevation(8);
}
```

This package also exports some box-shadow transition mixins to get some great
performance when animating between different box shadows.

```scss
@import "@react-md/elevation/dist/mixins";

.my-box-shadow-component {
  // animate from 4 to 8 on hover
  @include rmd-elevation-transition(4, 8, "&:hover");
}
```
npm package: @react-md/expansion-panel
Description: Create accessible expansion components for accordions and disclosures.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/expansion-panel

Expansion panels are used to create disclosure widgets that show additional
information once the component has been toggled to an "open" state. In other
words, expansion panels are a styled version of a
[details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
element.

An expansion panel can be rendered standalone or within a group with the
`ExpansionList` component and `usePanels` hook.

## Installation

```sh
npm install --save @react-md/expansion-panel
```

This package is not super helpful on its own, so it is recommended to also
install the following packages:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/icon
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/expansion-panel/demos) for
live examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

Expansion panels are normally rendered within a list of two or more panels. To
create such a list, you'll want to use the `ExpansionList` and `ExpansionPanel`
components and `usePanels` hook:

```tsx
import { render } from "react-dom";
import {
  ExpansionList,
  ExpansionPanel,
  usePanels,
} from "@react-md/expansion-panel";

const App = () => {
  const [panels, onKeyDown] = usePanels({
    count: 3,
    idPrefix: "my-panel-group",
  });

  const [panel1Props, panel2Props, panel3Props] = panels;

  return (
    <main>
      <ExpansionList onKeyDown={onKeyDown}>
        <ExpansionPanel {...panel1Props} headerChildren="Panel 1">
          Panel 1 contents...
        </ExpansionPanel>
        <ExpansionPanel {...panel2Props} headerChildren={<span>Panel 2</span>}>
          Panel 2 contents...
        </ExpansionPanel>
        <ExpansionPanel {...panel3Props} headerChildren="Panel 1">
          Panel 3 contents...
        </ExpansionPanel>
      </ExpansionList>
    </main>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/link
Description: The base package for including a theme for react-md. This is required by most other packages.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/link

Create simple links from react-md with a customizable theme. The provided `Link`
component can easily integrate with
[react-router](https://github.com/ReactTraining/react-router),
[@reach/router](https://github.com/reach/router), and theoretically any other
routing library if needed.

This package also exports a great screen-reader and keyboard accessibility
helper: `SkipToMainContent` that will allow a user to immediately jump to the
main content of the page.

## Installation

```sh
npm install --save @react-md/link
```

It is also recommended to install the following packages to the full experience.

```sh
npm install --save @react-md/theme @react-md/typography
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/link/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

### Usage with react-router

```tsx
import type { ReactElement } from "react";
import { render } from "react-dom";
import {
  Link as ReactRouterLink,
  LinkProps as ReactRouterLinkProps,
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import { Link as ReactMDLink, LinkProps as RMDLinkProps } from "@react-md/link";

export type LinkProps = RDMLinkProps & ReactRouterLinkProps;

function Link(props: linkProps): ReactElement {
  return <ReactMDLink {...props} component={ReactRouterLink} />;
}

function Home(): ReactElement {
  return <h1>Home page!</h1>;
}

function About(): ReactElement {
  return <h1>About page!</h1>;
}

function App(): ReactElement {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

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

### SkipToMainContent

If you are using the `@react-md/layout` package, this component is already
built-in to help out! However, this component can also be used within full page
dialogs or custom screens to be able to jump to a specific element in the page.

```tsx
import type { ReactElement } from "react";
import { render } from "react-dom";
import {
  Dialog,
  DialogHeader,
  DialogContent,
  DialogFooter,
} from "@react-md/dialog";
import { SkipToMainContent } from "@react-md/link";

const noop = (): void => {};

function App(): ReactElement {
  return (
    <Dialog
      id="full-page-dialog"
      aria-labelledby="full-page-dialog-title"
      visible
      onRequestClose={noop}
    >
      <DialogHeader>
        <SkipToMainContent mainId="full-page-dialog-content" />
        {/* pretend 100 focusable things before main content */}
      </DialogHeader>
      <DialogContent id="full-page-dialog-content">
        <p>Here is some content</p>
      </DialogContent>
    </Dialog>
  );
}

render(<App />, document.getElementById("root"));
```
npm package: @react-md/list
Description: This package is used to create lists with the material design specs.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/list

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

## Installation

```sh
npm install --save @react-md/list
```

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

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/divider \
  @react-md/avatar \
  @react-md/icon \
  @react-md/media
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/list/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
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"));
```
npm package: @react-md/material-icons
Description: Material Design Icon components for react-md
Latest version: 7.0.4

# @react-md/material-icons

This package converts each [material icon](https://fonts.google.com/icons?icon.set=Material+Icons) into a `React` component as inline SVG icons.

## Documentation

Check out the [documentation site] to see all the available icons and in-depth usage.

## Installation

With [npm]:

```sh
npm install --save @react-md/core @react-md/material-icons
```

With [pnpm]:

```sh
pnpm add @react-md/core @react-md/material-icons
```

With [yarn]:

```sh
yarn add @react-md/core @react-md/material-icons
```

## Add base styles

If you only want to use the icons in this package without the rest of `react-md`:

```scss
@use "@react-md/core" with (
  $icon-disable-font: true,
  $icon-disable-symbol: true,
  $icon-disable-inline: true,
  $icon-disable-spacing-before: true,
  $icon-disable-spacing-after: true,
  $icon-disable-spacing-above: true,
  $icon-disable-spacing-below: true,
  $icon-disable-primary-color: true,
  $icon-disable-secondary-color: true,
  $icon-disable-warning-color: true,
  $icon-disable-error-color: true,
  $icon-disable-success-color: true,
  $icon-disable-text-primary-color: true,
  $icon-disable-text-secondary-color: true,
  $icon-disable-text-hint-color: true,
  $icon-disable-text-disabled-color: true,
  $icon-disable-dense: true,
  $icon-disable-rotator: true,
  $disable-default-system-theme: true
);

@include core.icon-styles;
```

If you are using `react-md` already and only want to use the SVG icons in this package:

```scss
@use "@react-md/core" with (
  $icon-disable-font: true,
  $icon-disable-symbol: true
);

@include core.styles;
```

## Use the icon components

The [documentation site] will allow you to search and find all the available icons, but here's a quick example.

```tsx
import FavoriteOutlinedIcon from "@react-md/material-icons/FavoriteOutlinedIcon";

function Example() {
  return <FavoriteOutlinedIcon />;
}
```

[documentation site]: https://react-md.dev/material-icons-and-symbols
npm package: @react-md/media
Description: This package is used for including responsive media (images, videos, etc) within your app.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/media

This package is used for adding responsive media within your page such as images
and videos. Unlike other `react-md` packages, this package does not include a
theme.

## Installation

```sh
npm install --save @react-md/media
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/media/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import { MediaContainer, MediaOverlay } from "@react-md/media";

const App = () => (
  <div>
    <MediaContainer className="responsive-item">
      <img
        src="https://picsum.photos/400/400?random"
        role="presentation"
        alt="An image from https://picsum.photos"
      />
    </MediaContainer>
    <Media height={9} width={16}>
      <iframe
        src="https://www.youtube.com/embed/kyAn3fSs8_A"
        allowFullScreen
        frameBorder="0"
      />
    </MediaContainer>
    <MediaContainer height={9} width={16}>
      <img
        src="https://picsum.photos/800/800?image=430"
        role="presentation"
        alt="A random picture from https://picsum.photos"
      />
      <MediaOverlay position={position}>
        <h5>This is a random picture!</h5>
      </MediaOverlay>
    </MediaContainer>
  </div>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/menu
Description: Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/menu

Create accessible dropdown menus that auto-position themselves to stay within
the viewport. The menus are entirely navigable with a keyboard along with some
additional behavior:

- `ArrowUp` and `ArrowDown` to focus the previous/next `MenuItem` that also
  allows wrapping
- `Home` and `End` to focus the first/last `Menuitem` in the menu
- type the starting letters of a `MenuItem` to focus it

<!-- DOCS_REMOVE -->

> More information on the built-in accessibility can be found in the
> [accessibility example](https://react-md.dev/packages/menu/demos#accessibility-example-title)
> on the documentation site.

<!-- DOCS_REMOVE_END -->

## Installation

```sh
npm install --save @react-md/menu
```

You will also need to install the following packages for their styles:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/list \
  @react-md/button \
  @react-md/states \
  @react-md/utils
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/menu/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import { DropdownMenu, MenuItem } from "@react-md/menu";

const App = () => (
  <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
    <MenuItem onClick={() => console.log("Clicked Item 1")}>Item 1</MenuItem>
    <MenuItem onClick={() => console.log("Clicked Item 2")}>Item 2</MenuItem>
    <MenuItem onClick={() => console.log("Clicked Item 3")}>Item 3</MenuItem>
  </DropdownMenu>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/overlay
Description: A very simple package for dynamically creating overlays.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/overlay

Create overlays within your app to help the user focus on a temporary material
such as dialogs or drawers.

## Installation

```sh
npm install --save @react-md/overlay
```

Since this package isn't that helpful on its own, it is also recommended to
install the following packages:

```sh
npm install --save @react-md/theme \
  @react-md/button \
  @react-md/typography
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/overlay/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { useState } from "react";
import { render } from "react-dom";
import { Overlay } from "@react-md/overlay";

const App = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button
        id="example-button"
        type="button"
        onClick={() => setVisible((prevVisible) => !prevVisible)}
      >
        Show overlay
      </button>
      <Overlay
        id="example-overlay"
        onClick={() => setVisible(false)}
        visible={visible}
      />
    </>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/portal
Description: This package is for including icons within react-md. There is included support for both font icons and SVG icons.  There is also a helper component for applying spacing between icons and text.
Author: Mikkel Laursen
Latest version: 5.1.0

# @react-md/portal

The Portal component is a simple wrapper with React's `createPortal` API that
will automatically generate portal nodes behind the scenes as needed. Unlike the
majority of `react-md` packages, this package does not export any styles.

## Installation

```sh
npm install --save @react-md/portal
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/portal/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

The main purpose of the `Portal` is to be able to fix overflow issues for fixed
elements within the page. If you have `overflow` set to anything other than the
default value, fixed elements might not appear correctly. To work around this,
you can portal that fixed element to a different part of the page and it'll fix
the problem. If none of this makes sense to you at a first glance, you probably
don't need this package.

The example below will just show the API for the portal and not a real world
example.

```tsx
import { useState } from "react";
import { render } from "react-dom";
import { Portal } from "@react-md/portal";

const App = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button
        id="example-button"
        type="button"
        onClick={() => setVisible((prevVisible) => !prevVisible)}
      >
        Show Portal
      </button>
      <Portal>
        {visible && (
          <h3>
            This is some portalled text that will only appear when{" "}
            <code>visible</code>
          </h3>
        )}
      </Portal>
    </>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/progress
Description: Create horizontal, vertical, and circular progress indicators
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/progress

Create accessible horizontal or vertical progress bars or circular progress
indicators that can either be deterministic or indeterministic.

## Installation

```sh
npm install --save @react-md/progress
```

It is also recommended to install the following packages for updating the
progress theme or transitions:

```sh
npm install --save @react-md/theme \
  @react-md/transition \
  @react-md/utils
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/progress/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

The majority of the time you'll be using the progress components to track some
long running task or initial page loading. For accessibility, you'll need to add
an `id` to the progress component as well as updating the main loading area to
have `aria-buys="true"` and `aria-describedby="PROGRESS_ID"`:

```tsx
import { render } from "react-dom";
import { CircularProgress, LinearProgress } from "@react-md/progress";
import { Typography } from "@react-md/typography";
import { useToggle } from "@react-md/utils";

const App = () => {
  const [loadingCircle, , stopLoadingCircle] = useToggle(true);
  const [loadingLinear, , stopLoadingLinear] = useToggle(true);

  useEffect(() => {
    let circleTimeout = window.setTimeout(() => {
      stopLoadingCircle();
      circleTimeout = undefined;
    }, 5000);

    let linearTimeout = window.setTimeout(() => {
      stopLoadingLinear();
      linearTimeout = undefined;
    }, 8000);

    return () => {
      window.clearTimeout(circleTimeout);
      window.clearTimeout(linearTimeout);
    };
  }, []);

  return (
    <>
      <div
        id="circle-content"
        aria-busy={loadingCircle || undefined}
        aria-describedby={loadingCircle ? "circular-progress" : undefined}
      >
        {loadingCircle && <CircularProgress id="circular-progress" />}
        {!loadingCircle && (
          <Typography type="headline-2">Hello from circle div</Typography>
        )}
      </div>
      <div
        id="linear-content"
        aria-busy={loadingLinear || undefined}
        aria-describedby={loadingCircle ? "circular-progress" : undefined}
      >
        {loadingLinear && <CircularProgress id="linear-progress" />}
        {!loadingLinear && (
          <Typography type="headline-2">Hello from linear div</Typography>
        )}
      </div>
    </>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/sheet
Description: A package for making temporary sheets of material (normally for navigation or details).
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/sheet

A sheet is an extension of the `Dialog` component that allows for creating a
fixed element that appears inline with other content fixed to the viewport
borders. Sheets are great for:

- containing a persistent navigation tree on desktop
- containing a temporary navigation tree on any device size
- creating dropdown menus on mobile

## Installation

```sh
npm install --save @react-md/sheet
```

It is also recommended to install these other packages as they work hand-in-hand
with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/dialog \
  @react-md/icon \
  @react-md/material-icons
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/sheet/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import type { ReactElement } from "react";
import { Button } from "@react-md/button";
import { List, ListItem } from "@react-md/list";
import { Sheet } from "@react-md/sheet";
import { useToggle } from "@react-md/utils";

export default function Example(): ReactElement {
  const [visible, show, hide] = useToggle(false);

  return (
    <>
      <Button
        id="show-sheet-position"
        onClick={show}
        theme="secondary"
        themeType="contained"
      >
        Show
      </Button>
      <Sheet
        id="example-sheet-1"
        aria-label="Example Sheet"
        visible={visible}
        onRequestClose={hide}
        position={position}
      >
        <List onClick={hide}>
          <ListItem id="example-sheet-item-1">Item 1</ListItem>
          <ListItem id="example-sheet-item-2">Item 2</ListItem>
          <ListItem id="example-sheet-item-3">Item 3</ListItem>
          <ListItem id="example-sheet-item-4">Item 4</ListItem>
          <ListItem id="example-sheet-item-5">Item 5</ListItem>
        </List>
      </Sheet>
    </>
  );
}
```
npm package: @react-md/table
Description: Create responsive data tables and accessible fixed tables
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/table

Create simple tables or complex data tables and grids using the provided
low-level components.

## Installation

```sh
npm install --save @react-md/table
```

To get the most out of this package, it is also recommended to install:

```sh
npm install --save @react-md/utils \
  @react-md/states \
  @react-md/typography
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/table/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import {
  TableContainer,
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableCell,
} from "@react-md/table";

const App = () => (
  <TableContainer>
    <Table>
      <TableHeader>
        <TableRow>
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {Array.from({ length: 10 }, (_, i) => (
          <TableRow key={i}>
            <TableCell>{`Cell 1, row ${i + 1}`}</TableCell>
            <TableCell>{`Cell 2, row ${i + 1}`}</TableCell>
            <TableCell>{`Cell 3, row ${i + 1}`}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/tabs
Description: Create accessible tabs to organize data across multiple screens or interactions.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/tabs

Create an accessible tabs component that allows you to dynamically switch
between different views.

## Installation

```sh
npm install --save @react-md/tabs
```

It is also recommended to install the following packages as they work
hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/utils
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/tabs/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { Fragment } from "react";
import { render } from "react-dom";
import { TabsManager, Tabs, TabPanels, TabPanel } from "@react-md/tabs";
import { Typography } from "@react-md/typography";

const tabs = ["Tab 1", "Tab 2", "Tab 3"];

const App = () => (
  <TabsManager tabs={tabs} tabsId="tabs">
    <Tabs />
    <TabPanels>
      <TabPanel>
        <Typography type="headline-4">Panel 1</Typography>
      </TabPanel>
      <TabPanel>
        <Typography type="headline-4">Panel 2</Typography>
      </TabPanel>
      <TabPanel>
        <Typography type="headline-4">Panel 3</Typography>
      </TabPanel>
    </TabPanels>
);

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