Блог

Я работаю над визуальным элементом в стиле СВЕТОДИОД/метр в react: https://codesandbox.io/s/clever-almeida-1275n?file=/src/App.js

Моя конечная цель-добраться до чего-то подобного

Как вы можете видеть, для заливки используется градиент радиального типа.

Могу ли я добиться этого в своем коде или есть библиотека, которая может легко это поддерживать?

  <div className="App" style={{ textAlign: "left" }}>
      <span style={{ color: "white" }}>Track A</span>

      <MeterBar
        // height={"50px"}
        value={32}
        ledTotal={50}
        orientation="horizontal"
        ranges={[
          { min: 0, max: 30, color: "green" },
          { min: 31, max: 45, color: "orange" },
          { min: 46, max: 50, color: "red" }
        ]}
      />
 

Внешняя библиотека не требуется, просто добавьте еще одно значение в диапазоны объектов. пример

Апп

 {
  min: 0,
  max: 30,
  color: "green",
  gradient: "radial-gradient(hsl(99, 100%, 45%) 20%, hsl(99, 100%, 20%) 100%)"
}
 

Счетчик

 style={{
   minHeight: "100%",
   background: ledRange?.color ? ledRange.gradient : "grey",
   margin: "1px",
   flexGrow: 1,
   opacity: value >= idx ? 1 : 0.3,
   borderRadius: "1px"
}}