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 React 0.14.x 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 = () => {
  // Do something on completion
};

render(
  <CountUp
    className="custom-count"
    start={160527.0127}
    end={-875}
    duration={2.75}
    useEasing={true}
    separator=" "
    decimal=","
    prefix="EUR "
    suffix=" left"
    callback={onComplete}
  />,
  document.getElementById('root'),
);

Props

start {number}

The start number from which the should start from

end {number}

Target number to count up

duration in s {number}

Duration of count up animation

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 to be applied to the wrapper containing the number.

callback {function}

Callback function to be triggered after completed count up animation

License

MIT