zhans1993 / react-countup

💫 A configurable React component wrapper around CountUp.js

React CountUp

A configurable React component wrapper around CountUp.js.

Demo

Check out the demo.

Installation

yarn add react-countup

Alternatively with npm:

npm install react-countup --save

Usage

Simple

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="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'),
);

Props

start: number

Start value

end: number

Target value

duration: number

Duration in seconds

decimals: number

Amount of decimals

useEasing: boolean

Enable easing if set to true (default easing: easeOutExpo)

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 set to true, the CountUp component will always animate on every re-render.

onComplete: function

Function called after animation has completed

onStart: function

Function called before animation starts

easingFn: function

Easing function, see here for instructions

formattingFn: function

Function to customize the formatting of the number

Protips

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.

Manually start the animation

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;

License

MIT