React-CountUp

React-CountUp is a performant and easy-to-use React component for adding counting animations to your application. It can be used to add animations to numbers, percentages, and currencies. This component is customizable and supports various options such as duration, delay, prefix, suffix, and many more.

Installation

You can install React-CountUp using npm or yarn.

npm install react-countup --save

yarn add react-countup

Usage

To use React-CountUp, you need to import the CountUp component and add it to your project.

import React from 'react';
import CountUp from 'react-countup';

const App = () => {
  return (
    <div>
      <CountUp end={100} />
    </div>
  );
};

export default App;

This code will render a counting animation that starts from 0 and ends at 100.

Options

React-CountUp supports various options that can be used to customize the animation. Here are some of the available options:

• end: The number at which the animation ends.
• start: The number at which the animation starts (default: 0).
• duration: The duration of the animation in seconds (default: 2).
• delay: The delay before the animation starts in seconds (default: 0).
• prefix: The string to prepend to the number (default: "").
• suffix: The string to append to the number (default: "").
• useEasing: Whether to use easing for the animation (default: true).
• easingFn: The easing function to use (default: easeOutExpo).

You can pass these options as props to the CountUp component.

import React from 'react';
import CountUp from 'react-countup';

const App = () => {
  return (
    <div>
      <CountUp
        start={50}
        end={100}
        duration={3}
        prefix="$"
        suffix=" USD"
        useEasing={false}
      />
    </div>
  );
};

export default App;

This code will render a counting animation that starts from 50, ends at 100, and lasts for 3 seconds. The number is also prefixed with "$" and suffixed with "USD". Easing is disabled for this animation.

Conclusion

React-CountUp is a simple yet powerful React component that allows you to add counting animations to your application with ease. It is customizable and supports various options to help you create the perfect animation for your project. It is also highly performant, making it a great choice for any project that requires animations.