A configurable React component wrapper around CountUp.js.
Check out the demo.
Make sure you have a compatible version of React 15.x.x
installed in your project.
yarn add react-countup
Alternatively with npm:
npm install react-countup --save
import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';
render(
<CountUp start={0} end={160526} />,
document.getElementById('root')
);
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'),
);
Start value
Target value
Duration in seconds
Amount of decimals
Enable easing if set to true
(default easing: easeOutExpo
)
Group thousands by separator character
Specifies character of thousands separator
Specifies decimal character
Static text before the animating value
Static text after the animating value
CSS class name of the span element
If set to true
, the CountUp component will always animate on every re-render.
Function called after animation has completed
Function called before animation starts
Easing function, see here for instructions
Function to customize the formatting of the number
By default, the animation is triggered if any of the following props has changed:
duration
end
start
You can set redraw
to true
If you want your component to always animate on every re-render.
import React, { Component } from 'react';
import CountUp, { startAnimation } from 'react-countup';
const MyComponent = () => (
<div>
<CountUp className="CountUp" start={0} end={100} duration={3} ref={(countUp) => {
this.myCountUp = countUp;
}} />
<button className="Button" onClick={(event) => {
startAnimation(this.myCountUp);
}}>Count me up!</button>
</div>
);
export default App;
MIT