Créer un compteur animé dans React.js : un guide étape par étape

Question

Je cherche un moyen d'animer un compteur dans React.

Par exemple, j'ai 3 composants de la structure suivante :

• Maître :
• • Composants logiques
• • Compteur

(Master est le parent de logicComponent et Counter)

Le composant logique transmet un numéro au composant maître, qui le transmet au composant compteur qui doit effectuer l'animation. Le composant logique envoie des nombres de manière incrémentielle, c'est-à-dire qu'à chaque fois que quelque chose se produit, il envoie une mise à jour.

Par exemple, logicCounter appelle Master dix fois pour incrémenter le compteur, je m'attends à ce que Counter s'affiche 10 fois, affichant 10 nombres. Tout ce que j'ai essayé jusqu'à présent affiche le nombre final (10) sans aucun incrément.

Après avoir cherché une solution, je suis tombé sur Window.requestAnimationFrame() et je cherchais un moyen approprié de l'implémenter dans React.

J'essaie d'éviter d'utiliser des npm/bibliothèques tiers.

J'espère votre aide/idées. Merci.

Answer 1

Pour les compteurs animés dans React-JS, j'utilise 'react-count' : un wrapper de composant React configurable autour de "CountUp.js".

Veuillez vous référer à : https://github.com/glennreyes/react-countup. Découvrez la démo en direct : https://tr8tk.csb.app/ Étapes :

Installation :

*npm install react-countup --save*
or
*yarn add react-countup*

Exemple simple :

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

render(
  <CountUp start={0} end={160526} />,
  document.getElementById('root')
);

Exemple avancé :

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

const onComplete = () => {
  console.log('Completed!');
};

const onStart = () => {
  console.log('Started!');
};

render(
  <CountUp
    className="account-balance"
    start={160527.0127}
    end={-875.0319}
    duration={2.75}
    useEasing={true}
    useGrouping={true}
    separator=" "
    decimals={4}
    decimal=","
    prefix="EUR "
    suffix=" left"
    onComplete={onComplete}
    onStart={onStart}
  />,
  document.getElementById('root'),
);