umerbhat / react-battery-gauge Goto Github PK

Can't seem to figure out how to control the starting level of the charging animation. I would like to be able to change this to sort of indicate the level of the charge of the battery.

Hi,
First of all thanks for the great component.

I have noticed when we are using react-battery-gauge and pass gradFill for gradient then we got warning in console. (Warning: Each child in a list should have a unique "key" prop.)

Unfortunately there are no way to pass key for gradient to get rid of this warning.
Here is link to example where this warning is shown: example

Thanks in advance.

Thanks for the library, works great!

We have a use case in an IoT application where the battery level might be unknown and we'd like to render an ! or some other combination to designate the particular state. Is there any way to make it happen with this library?

Bug Description:

In the current version of the react battery SVG gauge package, I cannot customize the scale of the flash animation despite having the option to pass a chargingFlash object with a scale parameter in the customization prop.

Steps to Reproduce:

1. Initialize the gauge component with customization prop options including a chargingFlash object with a non-undefined scale value and charging set to true.
2. Observe that the scale of the Charging flash remains unaffected by the provided value.

I want to change the value while pass different number to the value prop,
but the value of battery wont change if the animated prop is added

This is similar to this issue but associated with a different property: #6

I am using the BatteryGauge component with batteryMeter attribute

const batterySegmentCount = 5 
batteryMeter: {
            fill: 'green',
            noOfCells: batterySegmentCount,
            lowBatteryValue: batteryIncrement + 1,
 },

noOfCells is having a value of 5. For any value > 1, it is throwing the following warnings:

Check the render method of `BatteryLevel`. See https://reactjs.org/link/warning-keys for more information.
    at rect
    at BatteryLevel (http://localhost:4200/vendors-node_modules_react-battery-gauge_dist_react-battery-gauge_esm_js.js:277:26)
    at g
    at svg
    at CanvasProvider (http://localhost:4200/vendors-node_modules_react-battery-gauge_dist_react-battery-gauge_esm_js.js:198:23)
    at Canvas (http://localhost:4200/vendors-node_modules_react-battery-gauge_dist_react-battery-gauge_esm_js.js:207:24)
    at BatteryGauge (http://localhost:4200/vendors-node_modules_react-battery-gauge_dist_react-battery-gauge_esm_js.js:576:24)

Another warning that is showing in console

react-dom.development.js:798 Error: <rect> attribute width: A negative value is not valid. ("-0.5")

On inspect I don't see any rect element with -ve value but when I am using the noOfCells>1 ,warning appears.