alpha v0.0.1

React speed gauge

Este componente, ultraligero y personalizable, creado con React y TailwindCSS. Incluye soporte para cambiar entre temas dinámicamente. 🚀

próximamente estará disponible el comando de instalación

Themas

Disfruta de la posibilidad de cambiar entre temas de forma dinámica.

Responsive

Con un diseño responsive, se adapta a cualquier tamaño de pantalla y contenedor.

Customizable

Personaliza el componente a tu gusto, cambia colores, tamaños, codigo y fuente más.

¿Cómo instalar?

Próximamente estará disponible el comando de instalación.

¿Cómo usar?

import ReactSpeedGauge from './ReactSpeedGauge';
import useRandomValue from '@/hooks/useRandomValue';

const MAX_VALUE = 500;

export default function DemoReactSpeedGauge() {
  const value = useRandomValue(0, MAX_VALUE, 1000);
  return (
    <ReactSpeedGauge
      value={value}
      maxValue={MAX_VALUE}
      radius={70}
      className='max-w-lg'
      curveThickness={10}
      rangeDegrees={270}
      label='Speed'
      gradients={{
        fgCurveLine: [
          { offset: 0, color: 'var(--fgCurveLine-1)' },
          { offset: 50, color: 'var(--fgCurveLine-2)' },
          { offset: 100, color: 'var(--fgCurveLine-2)' },
        ],
        bgCurveLine: [
          { offset: 0, color: 'oklch(100% 0 0 / 10%)' },
          { offset: 100, color: 'oklch(100% 0 0 / 10%)' },
        ],
        speedNeedle: [
          { offset: 0, color: 'oklch(100% 0 0 / 50%)' },
          { offset: 50, color: 'oklch(100% 0 0 / 20%)' },
          { offset: 100, color: 'transparent' },
        ],
      }}
    />
  );
}