chrisuser/react-usage-bar

React component to display the usage of space or the sectors for which a container is divided.

Hi there 👋

I'm Cristiano, a Frontend developer based in Italy. Firm supporter of open source 💻, art 🎨, music 🎹 and cinema 🎬 passionate. Always pushing myself towards my limits with the intent to overcome them 💪. Learning something new every day 🌱.

Co-Founder of Massbit, currently working @ 22HBG.

Past years activity

2022

2021

2020

react-usage-bar's Issues

Remove strong style preferences from within the child component.

Wondering if we can remove this since it also imposes a style preference from within the child component.

Originally posted by @clarkmcc in #16 (comment)

[Bug]: Remove padding from UsageBar

What happened?

Is it possible to remove the padding from the UsageBar? My personal opinion is that child components shouldn't enforce on the parent how the child is allowed to lay out on the page.

Version

1.1.22

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[v1.1.8] Color fallback property is not always correctly defined

Affected versions

v1.1.7 - v1.1.8

Bug description

Most of the times one or more slots, without a previous defined background color, render as a transparent block.

Possible solution

• This bug could be caused by the concurrence of the two useEffect hooks: one sets the array of the colors used (later) for the items without one; the other formats the items array with the correct color property.

The effect is that the items are, sometimes, formatted before the full usedColors array is populated.

• Also the callback that renders the usageBar isn't triggered by the formatted items array changes, it runs only once.

[New Feature]: Support classes for colors

Describe your proposal

In my project I use tailwind which supports theme-based color classes like this

<div class="bg-red-500 dark:bg-red-100">

This applies a medium red background color when in light mode, and a light red color when in dark mode. I would love the ability to do set the item colors using these classes.

<UsageBar
  items={[
    { name: "macOS", value: 1, class: "bg-blue-500 dark:bg-blue:100" },
    { name: "Debian", value: 1, class: "bg-red-500 dark:bg-red:100" },
  ]}/>

Technical details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct