react-countup

What is react-countup?

The react-countup package is a React component that allows you to create animated number counters. It is useful for displaying statistics, financial data, or any other numerical information that benefits from a dynamic presentation.

What are react-countup's main functionalities?

Basic Count Up

This feature allows you to create a simple count-up animation from 0 to a specified number. In this example, the counter will animate from 0 to 100.

<CountUp end={100} />

Custom Start and End Values

You can specify both the start and end values for the count-up animation. Here, the counter will animate from 50 to 150.

<CountUp start={50} end={150} />

Duration

This feature allows you to set the duration of the count-up animation. In this example, the counter will animate from 0 to 100 over a period of 5 seconds.

<CountUp end={100} duration={5} />

Formatting Numbers

You can format the numbers with separators for better readability. In this example, the counter will animate to 1,000 with a comma as the thousands separator.

<CountUp end={1000} separator=',' />

OnComplete Callback

This feature allows you to execute a callback function once the count-up animation is complete. Here, a message 'Completed!' will be logged to the console when the counter reaches 100.

<CountUp end={100} onEnd={() => console.log('Completed!')} />

Other packages similar to react-countup

react-animated-numbers

The react-animated-numbers package provides a similar functionality to react-countup, allowing you to animate numbers in a React application. It offers more customization options for the animation style and easing functions, making it a good alternative for more complex animations.

react-spring

The react-spring package is a spring-physics-based animation library for React applications. While it is not specifically designed for counting numbers, it can be used to create complex animations, including number animations, with more control over the animation physics and behavior.

react-flip-numbers

The react-flip-numbers package provides a unique flip animation for numbers, similar to an old-school flip clock. It offers a different visual style compared to react-countup and can be used to create engaging number animations with a retro feel.

README

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 = () => {
  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

onStart: function

Method called before animation starts

easingFn: function

Method to customize easing the function. See also here

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;

redraw {boolean}

Animate on every ancestor component render cycle

License

MIT