I'm looking for a way to animate a counter in React.
For the sake of example, I have 3 components with the following structure:
(Master is the parent of logicComponent and Counter)
The logic component passes a number to the master component, which passes it to the counter component that should perform the animation. The logical component sends numbers incrementally, that is, every time something happens, it sends an update.
For example, logicCounter calls Master ten times to increment the counter, I expect Counter to render 10 times, displaying 10 numbers. Everything I've tried so far displays the final number (10) without any increments.
After searching for a solution I came acrossWindow.requestAnimationFrame()and I was looking for a proper way to implement it in React.
I'm trying to avoid using 3rd party npms/libraries.
Hope for your help/ideas. Thanks.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For animated counters in React-JS, I use'react-count': a configurable React component wrapper around "CountUp.js".
Please refer to:https://github.com/glennreyes/react-countup. Check out the live demo:https://tr8tk.csb.app/step:
Install:
Simple example:
import React from 'react'; import { render } from 'react-dom'; import CountUp from 'react-countup'; render(Advanced Example:
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(