Domine a animação de contadores numéricos no React com CountUp.js

Como animar um contador numérico no React com CountUp.js?

A animação de contadores numéricos é uma maneira eficaz de apresentar dados de forma visualmente atraente em suas aplicações. Neste tutorial, vamos explorar como implementar essa funcionalidade utilizando a biblioteca CountUp.js em um projeto React. Vamos abordar desde a instalação da biblioteca até a criação de um contador funcional, perfeito para mostrar estatísticas ou dados em tempo real.

O que é CountUp.js?

CountUp.js é uma biblioteca leve e fácil de usar, projetada para animar números em suas aplicações web. A animação ocorre suavemente, proporcionando uma experiência visual agradável aos usuários. Com a CountUp.js, você pode customizar a duração da animação e até mesmo a função de easing para um efeito mais dinâmico.

Instalando o CountUp.js

Primeiro, você precisa instalar a biblioteca em seu projeto. Se você estiver usando npm, execute o seguinte comando:

npm install countup.js

Após a instalação, você pode importar CountUp em seu componente React:

import CountUp from 'countup.js';

Criando um contador simples

Vamos criar um componente que exibirá um contador animado. Crie um novo componente chamado Contador.js. Aqui está um exemplo simples de como usar o CountUp.js:

import React, { useEffect, useRef } from 'react';
import CountUp from 'countup.js';

const Contador = ({ start, end }) => {
    const contadorRef = useRef(null);

    useEffect(() => {
        const countUp = new CountUp(contadorRef.current, end, {
            duration: 2,
            useEasing: true,
        });
        countUp.start();
    }, [end]);

    return <span ref={contadorRef}>{start}</span>;
};

export default Contador;

Neste código, usamos o hook useEffect para iniciar a animação assim que o componente for montado. O contadorRef é usado para referenciar o elemento que exibirá o número animado. A animação irá do valor start até o valor end no espaço de 2 segundos.

Personalizando a animação

CountUp.js oferece várias opções de personalização. Você pode ajustar a duração, a função de easing e até mesmo adicionar um prefixo ou sufixo ao número. Aqui está um exemplo de como adicionar um prefixo "R$" e alterar a duração:

const countUp = new CountUp(contadorRef.current, end, {
    duration: 3,
Prefix: 'R$',
    useEasing: true,
});

Exibindo múltiplos contadores

Se você deseja exibir múltiplos contadores em um único componente, pode fazer isso facilmente passando diferentes valores para o componente Contador. Aqui está um exemplo:

const App = () => {
    return (
        <div>
            <h1>Contadores Animados</h1>
            <Contador start={0} end={100} />
            <Contador start={0} end={200} />
            <Contador start={0} end={300} />
        </div>
    );
};

Conclusão

Neste tutorial, você aprendeu como animar contadores numéricos no React utilizando a biblioteca CountUp.js. Através de exemplos práticos, você viu como instalar a biblioteca, criar um contador simples e personalizar a animação de acordo com suas necessidades. Experimente implementar contadores em suas próximas aplicações e observe como isso pode melhorar a apresentação de dados.

Por que usar contadores animados em suas aplicações?

Contadores animados são uma excelente forma de captar a atenção dos usuários e apresentar informações de maneira impactante. A biblioteca CountUp.js se destaca por sua simplicidade e eficiência, permitindo que desenvolvedores criem animações atraentes com um mínimo de esforço. Com a popularidade crescente de dashboards e painéis informativos, entender como implementar contadores animados se tornou uma habilidade valiosa para qualquer desenvolvedor React.

Algumas aplicações:

• Dashboards de métricas em tempo real
• Exibição de estatísticas de vendas
• Contadores de tempo de eventos ou promoções

Dicas para quem está começando

• Experimente diferentes opções de personalização do CountUp.js.
• Teste a animação em diferentes dispositivos para garantir uma boa experiência do usuário.
• Considere o uso de contadores em seções críticas de sua aplicação.

Compartilhe este tutorial