Battery

Battery is a battery component, which is generally used in scenarios where the battery percentage needs to be displayed.

Code demo

Base usage

import { Battery } from 'tuya-panel-kit'

<Battery value={100} />
<Battery value={50} />
<Battery value={20} />
<Battery value={10} />

Custom theme

import { Battery } from 'tuya-panel-kit'

<Battery value={100} theme={{ batteryColor: '#FF4800' }} />

Modify the battery color allocation rules

import { Battery } from 'tuya-panel-kit'

const calcColor = (top, highColor, middleColor, lowColor) => {
  // 0-10%: red  10%-60%: black   60%-100%: green
  if (top <= 8.4 && top >= 3) {
    return highColor;
  } else if (top <= 15.6 && top > 8.4) {
    return middleColor;
  }
  return lowColor;
};

<Battery value={60} size={30} onCalcColor={calcColor} middleColor="#999" />

API

tuya01:01