How to display percentage value on ReactJS Material UI progress bar

Question

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears.

javascript reactjs css material-design material-ui

Answer 1

Answer №1

Check out the sample on codesandbox for an example of how Materiaui supports progressbar implementation.

Answer 2

Check out the sample on codesandbox for an example of how Materiaui supports progressbar implementation.

Answer 3

Answer №2

It appears that the progress bar you are looking for may not be available in Material UI based on the image provided.

You might want to consider utilizing React Bootstrap, a package that offers similar functionalities to achieve your desired progress bar.

For more information, you can refer to this link -

Answer 4

It appears that the progress bar you are looking for may not be available in Material UI based on the image provided.

You might want to consider utilizing React Bootstrap, a package that offers similar functionalities to achieve your desired progress bar.

For more information, you can refer to this link -

Answer 5

Answer №3

If you're still looking for a solution, I was able to tackle this using the magical powers of React.createPortal. 😊

Here's how you can make it work:

Firstly, ensure to add a reference to your progress bar (note: you can't use useRef if you want your label to be initialized on mount; opt for element local state instead - like
```
useState<HtmlElement | undefined>()
```
)
Incorporate the following snippet inside your progress bar component:

ref={(el: HTMLElement) => setElement(el)}

Now, create a separate component that will contain your label. Make sure to pass down the element from your local state (IMPORTANT: pass the child element from your node, not the parent -> el={element.firstElementChild}).
Utilize createPortal to seamlessly integrate this component as a child of element.firstElementChild, which is essentially the progress bar. Here's a glimpse of my code for achieving this:

// In my scenario, I ensured the HTML code for my label has an absolute position so I could position it to the far right of my progress bar.
const MyLabel: FC<{ el: Element; extraLabel: string }> = ({ el, extraLabel }) => {
  return (
    <>
      {createPortal(
        <>..your HTML code for your label..</>, 
        el,
      )}
    </>
  );
};

Check out how it looks in action:

https://i.stack.imgur.com/tlsqT.png

Hope this helps! 🌟

To delve deeper into the wonders of React.createPortal and understand its sorcery, here's the official documentation: https://reactjs.org/docs/portals.html

Warm regards, Audrey - Senior FullStack Developer

Answer 6

If you're still looking for a solution, I was able to tackle this using the magical powers of React.createPortal. 😊

Here's how you can make it work:

Firstly, ensure to add a reference to your progress bar (note: you can't use useRef if you want your label to be initialized on mount; opt for element local state instead - like
```
useState<HtmlElement | undefined>()
```
)
Incorporate the following snippet inside your progress bar component:

ref={(el: HTMLElement) => setElement(el)}

Now, create a separate component that will contain your label. Make sure to pass down the element from your local state (IMPORTANT: pass the child element from your node, not the parent -> el={element.firstElementChild}).
Utilize createPortal to seamlessly integrate this component as a child of element.firstElementChild, which is essentially the progress bar. Here's a glimpse of my code for achieving this:

// In my scenario, I ensured the HTML code for my label has an absolute position so I could position it to the far right of my progress bar.
const MyLabel: FC<{ el: Element; extraLabel: string }> = ({ el, extraLabel }) => {
  return (
    <>
      {createPortal(
        <>..your HTML code for your label..</>, 
        el,
      )}
    </>
  );
};

Check out how it looks in action:

https://i.stack.imgur.com/tlsqT.png

Hope this helps! 🌟

To delve deeper into the wonders of React.createPortal and understand its sorcery, here's the official documentation: https://reactjs.org/docs/portals.html

Warm regards, Audrey - Senior FullStack Developer

Answer 7

Answer №4

To visually represent the progress, you can show this.state.completed, indicating the percentage value. To enhance its appearance, consider adding some styling options. Additionally, for clarity, you may choose to append a % symbol at the end since it represents a numeric value.

Answer 8

To visually represent the progress, you can show this.state.completed, indicating the percentage value. To enhance its appearance, consider adding some styling options. Additionally, for clarity, you may choose to append a % symbol at the end since it represents a numeric value.

Answer 9

Answer №5

Check out these unique material-ui custom styles combined to create the desired component:

import React from "react";

import { withStyles } from "@material-ui/styles";
import { lighten, Box, LinearProgress, Typography } from "@material-ui/core";

interface Props {
  color?: "primary" | "secondary";
  hex?: string;
  value?: number;
}

/**
 * CustomProgressBar -- atom
 * A customized material-ui progress bar.
 * @param {'primary' | 'secondary'} color Choose between primary or secondary colors.
 * @param {string} hex Override color choice with a hex value.
 * @param {number} value The value for the progress bar, ranging from 0-100.
 * @return {JSX} React component
 */
const CustomProgressBar = ({ color, hex, value }: Props) => {
  let internalColor: string;

  if (typeof hex === "undefined") {
    internalColor = "#3f51b5";
  } else if (typeof hex !== "undefined" && /^#[0-9A-F]{6}$/i.test(hex)) {
    internalColor = hex;
  } else {
    throw new Error("Invalid hex prop -- please use a hex string.");
  }

  if (typeof value === "undefined") {
    value = 0;
  } else if (typeof value === "number" && value < 0) {
    throw new Error(
      "Invalid value prop -- please use a number more than or equal to 0."
    );
  } else if (typeof value === "number" && value > 100) {
    throw new Error(
      "Invalid value prop -- please use a number less than or equal to 100."
    );
  }

  // Styling based on material-ui docs
  const StyledLinearProgress = withStyles({
    root: {
      height: 20,
      width: "100%",
      backgroundColor: hex ? lighten(internalColor, 0.5) : undefined,
      borderRadius: "10px"
    },
    bar: {
      borderRadius: 20,
      backgroundColor: hex ? internalColor : undefined
    }
  })(LinearProgress);

   // Custom color adjustment
  const WhiteTextTypography = withStyles({
    root: {
      color: "#FFFFFF"
    }
  })(Typography);

  return (
    <Box position="relative" display="inline-flex" style={{ width: "100%" }}>
      <StyledLinearProgress
        color={hex ? undefined : color}
        variant="determinate"
        value={value}
      />
      <Box
        top={0}
        left={0}
        bottom={0}
        right={0}
        position="absolute"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <WhiteTextTypography variant="body2">{`${value}%`}</WhiteTextTypography>
      </Box>
    </Box>
  );
};

export default CustomProgressBar;

For an example in action, visit: https://codesandbox.io/s/stack-51254333-progressbar-x7j5m?file=/src/App.tsx:0-2390

Answer 10

Check out these unique material-ui custom styles combined to create the desired component:

import React from "react";

import { withStyles } from "@material-ui/styles";
import { lighten, Box, LinearProgress, Typography } from "@material-ui/core";

interface Props {
  color?: "primary" | "secondary";
  hex?: string;
  value?: number;
}

/**
 * CustomProgressBar -- atom
 * A customized material-ui progress bar.
 * @param {'primary' | 'secondary'} color Choose between primary or secondary colors.
 * @param {string} hex Override color choice with a hex value.
 * @param {number} value The value for the progress bar, ranging from 0-100.
 * @return {JSX} React component
 */
const CustomProgressBar = ({ color, hex, value }: Props) => {
  let internalColor: string;

  if (typeof hex === "undefined") {
    internalColor = "#3f51b5";
  } else if (typeof hex !== "undefined" && /^#[0-9A-F]{6}$/i.test(hex)) {
    internalColor = hex;
  } else {
    throw new Error("Invalid hex prop -- please use a hex string.");
  }

  if (typeof value === "undefined") {
    value = 0;
  } else if (typeof value === "number" && value < 0) {
    throw new Error(
      "Invalid value prop -- please use a number more than or equal to 0."
    );
  } else if (typeof value === "number" && value > 100) {
    throw new Error(
      "Invalid value prop -- please use a number less than or equal to 100."
    );
  }

  // Styling based on material-ui docs
  const StyledLinearProgress = withStyles({
    root: {
      height: 20,
      width: "100%",
      backgroundColor: hex ? lighten(internalColor, 0.5) : undefined,
      borderRadius: "10px"
    },
    bar: {
      borderRadius: 20,
      backgroundColor: hex ? internalColor : undefined
    }
  })(LinearProgress);

   // Custom color adjustment
  const WhiteTextTypography = withStyles({
    root: {
      color: "#FFFFFF"
    }
  })(Typography);

  return (
    <Box position="relative" display="inline-flex" style={{ width: "100%" }}>
      <StyledLinearProgress
        color={hex ? undefined : color}
        variant="determinate"
        value={value}
      />
      <Box
        top={0}
        left={0}
        bottom={0}
        right={0}
        position="absolute"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <WhiteTextTypography variant="body2">{`${value}%`}</WhiteTextTypography>
      </Box>
    </Box>
  );
};

export default CustomProgressBar;

For an example in action, visit: https://codesandbox.io/s/stack-51254333-progressbar-x7j5m?file=/src/App.tsx:0-2390

How to display percentage value on ReactJS Material UI progress bar

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

No acknowledgment from command

Challenges with uploading files using jQuery

The process of departing a SocketIO room and switching to a different room logic

What is the best way to display a series of interconnected tables in a specific order within MySQL using recursion?

Floating division element above responsive divisions

Tips for saving and accessing the value of an md-select ng-model in an AngularJS dialog?

Transmitting keys and data from Sails.js to Angular via streaming

What is the optimal location for storing JSON data while dynamically loading via AJAX?

What is the best way to showcase an image in a React.js application?

The proper method for utilizing the clipped prop on the <v-navigation-bar/> component within Vuetify is as follows

Transforming an object into an array of objects with the power of JavaScript

Conceal the Div containing the specified class

Issue with Dropdown Menu functionality while using multiple dropdown options

Using JavaScript's DOM manipulation to switch out one HTML tag for another

Dim the brightness of an image on Internet Explorer

Notifying a Child Component in React When a Props-Using Function Resolves a REST Call

Combining multiple Float32Arrays to create a single Float32Array

Adjust the internal state within a Vue3 component using a window function

Run a series of Mocha unit tests based on the outcomes of previous test results

Ways to retrieve a variable within the init() function