@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 React from "react";
import { render } from "react-dom";
import { CircularProgress, LinearProgress } from "@react-md/progress";
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 && <Text type="headline-2">Hello from circle div</Text>}
      </div>
      <div
        id="linear-content"
        aria-busy={loadingLinear || undefined}
        aria-describedby={loadingCircle ? "circular-progress" : undefined}
      >
        {loadingLinear && <CircularProgress id="linear-progress" />}
        {!loadingLinear && <Text type="headline-2">Hello from linear div</Text>}
      </div>
    </>
  );
};

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

Changelog

3.1.0 (2021-09-10)

Bug Fixes

• @react-md/dialog: DialogFooter align prop applies correct classes (644971d)
• @react-md/form: TooManyFilesError is only used if all the other validation has passed (6ed3f54)
• @react-md/form: ensure file names end with a period for useFileUpload extensions (9238140)
• @react-md/form: prevent infinite rerenders when calling useFileUpload's reset in useEffect (b2875b1)
• @react-md/utils: useDropzone fix around onDragLeave behavior (fdff9f2)
• typescript: updated all array types to be readonly (8f71bcb)

Features

• @react-md/form: add isValidFileName option to useFileUpload (dbd0375)
• @react-md/typography: override default typography without globals (ce89374), closes #1239

Documentation

• react-md.dev: updated sassdoc for new module system (4746d26)
• react-md.dev: updated SortableColumns example to import SortOrder type (b629e3e)

Other Internal Changes

• ran yarn format to include new files (48d3d7f)
• Simplifying format and covering json and yml files (#1227) (045ba5e)
• @react-md/dev-utils: fixed spelling of gzipped (baad174)
• examples: updated nextjs examples to latest version of next (b50d745)
• react-md.dev: added sassdoc hot-reloading (9d58e09)
• react-md.dev: updated sassdoc examples to be linkable (9ed096e)
• react-md.dev: Updated fonts for latest nextjs build optimizations (ca9ecbd)
• typescript: support typescript@v4.4.2 (5a9dd72)