@react-md/progress

@react-md/progress

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

Installation

npm install --save @react-md/progress

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

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

Documentation

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

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":

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

Changelog

5.1.0 (2022-03-18)

Bug Fixes

• @react-md/app-bar: AppBarTitle now applies flex: 1 1 auto (4a47c92)
• @react-md/tooltip: Tooltips stay visible on mobile Firefox (7039fef)

Features

• @react-md/menu: Provide props for Menu's List (2b5fb23)
• @react-md/tooltip: useTooltip supports new disabled option (a934ae9)

Documentation

• @react-md/tooltip: Remove documentation around Tooltipped component (1a59190), closes #1367

Other Internal Changes

• removed old eslint rules (88eb2b2)
• run lint-scripts --fix for consistent-type-imports (42d839d)
• Updated the v5.0.0 release notes (6106751)
• @react-md/dev-utils: Fix indexer for consistent-type-imports (2d2d1e9)
• @react-md/form: bump nanoid from 3.2.0 to 3.3.1 (e625488)
• react-md.dev: Add demo for rendering DropdownMenus as a Grid (3ac42ef)
• react-md.dev: Do not lazy load icons through next/head (47ccc1d)
• react-md.dev: Fix 404 page for sandboxes (4772c88)
• react-md.dev: Fix tooltip dense demo (efc7f8c)
• react-md.dev: Fix usage of useTooltip when it is conditionally applied (cfca184)
• react-md.dev: Update examples for useTooltip disabled option (f318ecf)
• stylelint: bump stylelint plugins to latest (2bb6429)