React Animated Counter

A lightweight React component for beautifully animated incrementation & decrementation of a state integer value. Inspired by Robinhood's portfolio balance animation.

react-animated-counter demo

Installation

npm install react-animated-counter

Usage

Props:

Name	Type	Description	Default
`value`	`integer`	The state integer value	`0`
`fontSize`	`string`	Applied css `font-size`	`18px`
`color`	`string`	Applied css `color`	`black`
`incrementColor`	`string`	Animation color when `value` increases	`#32cd32`
`decrementColor`	`string`	Animation color when `value` decreases	`#fe6862`
`includeDecimals`	`boolean`	Includes or removes decimal point values in provided `value` (rounds to nearest hundredth)	`true`

Basic Demo:

Codesandbox Link: https://codesandbox.io/s/xenodochial-cerf-gjl9ck?file=/src/App.js

import React, { useState } from  'react';
import { AnimatedCounter } from  'react-animated-counter';

const App = () => {
  // Integer state
  const [counterValue, setCounterValue] = useState(500);

  // Handle random increment/decrement
  const handleCounterUpdate = (increment) => {
    const delta = (Math.floor(Math.random() * 100) + 1) * 0.99;
    setCounterValue(increment ? counterValue + delta : counterValue - delta);
  };

  return (
    <div>
      <AnimatedCounter value={counterValue} color="white" fontSize="40px" />
      <div>
        <button onClick={() => handleCounterUpdate(false)}>Decrement</button>
        <button onClick={() => handleCounterUpdate(true)}>Increment</button>
      </div>
    </div>
  );
};

Output:

react-animated-counter demo

With recharts Demo:

Codesandbox Link: https://codesandbox.io/s/suspicious-morning-rx60sm?file=/src/App.js

Output:

react-animated-counter recharts demo