React CountUp

A configurable React component wrapper around CountUp.js to count up numbers.

Demo

Check out the live demo.

Installation

Make sure you have a compatible version of and 15.x.x installed in your project.

npm install react-countup --save

Usage

Basic

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

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

Advanced

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="custom-count"
    start={160527.0127}
    end={-875}
    duration={2.75}
    useEasing={true}
    separator=" "
    decimal=","
    prefix="EUR "
    suffix=" left"
    onComplete={onComplete}
    onStart={onStart}
  />,
  document.getElementById('root'),
);

Props

start: number

The start number from which the should start from

end: number

Target number to count up

duration: number

Duration of count up animation in seconds

decimals: number

Amount of decimals

useEasing: boolean

Use "easeOutExpo" if true

useGrouping: boolean

Group thousands by separator character

separator: string

Specifies character of thousands separator

decimal: string

Specifies decimal character

prefix: string

Static text before the animating value

suffix: string

Static text after the animating value

className: string

CSS class name of the span element

redraw: boolean

If true, your component will always animate on every re-render.

onComplete: function

Method called after animation has completed

onStart: function

Method called before animation starts

easingFn: function

Method to customize easing the function. See also here

formattingFn: function

Method to customize the formatting of the number

Advanced Usage

By default, the animation triggered if any of the follow props has changed:

• duration
• end
• start

You can set redraw to true If you want your component to always animate on every re-render.

Start animation manually

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);
    }}>Animate me!</button>
  </div>
);

export default App;

License

MIT