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.

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.

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?

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