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 React component wrapper around CountUp.js. This component counts up a number in an animated way.

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

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

Attributes

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

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

callback {function}

Callback function to be triggered after completed count up animation

License

MIT