Display disc sectors, stats and more with this lightweight user-friendly React component.
Now compatible with Tailwind.

Install via npm

npm install react-usage-bar --save

or yarn

yarn add react-usage-bar

Live demo at: https://chrisuser.github.io/react-usage-bar/

The usage bar needs to receive an array of items. In order to display all the values correctly every item should follow this interface:

Attribute	Type	Required
value	number	Yes
name	string	Yes
color	string	No
className	string	No
dotClassName	string	No

The value attribute indicates the amount of space taken up by the sector with a specific name. The color property can be utilized to define the background color of that particular portion in the bar.

To further customize the sector element, you can apply your own CSS classes or Tailwind classes using the className attribute.

In case you are using the compact layout and have not specified a color value, you can customize the dotClassName similarly to the className attribute.

The defined color property value will have a priority on the background color defined in the className and/or dotClassName ones.

It is recommended to use exclusively color or one of the two other properties per item.

import * from 'react'
import UsageBar from 'react-usage-bar'
import "react-usage-bar/dist/index.css"

const App = () => {

  const itemsToDisplay = [
  {
    name: "UI",
    value: 10,
    color: "#000000",
  },
  {
    name: "Photos",
    value: 30,
  },
  {
    name: "Videos",
    value: 15,
  },
  {
    name: "System Data",
    value: 33,
  },
  {
    name: "Other",
    value: 8,
  }]

  return <UsageBar items={itemsToDisplay} total={100} />
})

export default App

The total prop is also required.

When true, shows the percentage value of all the elements.

When false, hides all the tooltips or lables of the items.

When true, enables the component to work in dark-mode.

When true, enables the new compact design. Try it. 😎

When true, this feature dynamically assigns a random color to the background of any items where a value has not been specified

Customize the error string that appears when the total values of the provided items exceeds 100%.

Custom classes props: add custom or Tailwind classes to elements of the component.

Can customize the main div of the component.

Can customize the actual bar element of the component.

Can customize the tooltip div of the item in which are written all the textual info.

Can customize the style of the error message.

You must import the style directly from the package directory, like this:

import "react-usage-bar/build/index.css"

The project variables are:

• --text-color
• --background-tooltip-color
• --background-bar-color

The main css classes are the following:

The error message.

The class that contains all the colors for the light mode.

The class that contains all the colors for the dark mode.

The main div of the component.

The actual bar of the component.

The single item represented in the bar. This class is vastly used.

The tooltip of the item in which are written all the textual info.

• .o-UsageBar__bar__tooltip__percentage - Used to control the style of the percentage lables.
• ::after - Is used to make the triangular shape on the bottom (or top) of the tooltips.

Used in the compact layout to list all the labels for the elements.

The labels for the elements of the bar.

The colored dot before the label of the elements.

You can run the project in a local enviroment using Storybook:

$ yarn storybook

If you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.
Remeber to follow the Contributing Guidelines.

React Usage Bar is MIT licensed.