@react-md/divider

@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

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:

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

Documentation

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

Usage

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

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"));

Changelog

4.0.3 (2021-12-31)

Bug Fixes

• @react-md/icon: FileInput default icon changed from file_download to file_upload (174d1c1), closes #1325
• @react-md/table: Sortable Column Alignment (e447cc5), closes #1321
• @react-md/utils: useIsUserInteractionMode get mode via context (b5f93ae), closes #1322
• examples: Updated create-react-app README to use correct start command (37acdc3)

Other Internal Changes

• Update tests to use jest.mocked (4bb25fb)
• Updated all packages' peerDependenciesMeta (60fcd71), closes #1319
• @react-md/dev-utils: Update watch command for new sass modules (2e7a87a)
• examples: Update next to latest version (3521e9b)