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.

Demo

Check out the demo.

Installation

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

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)

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 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