Package Exports

react-animated-counter
react-animated-counter/dist/cjs/index.js
react-animated-counter/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-animated-counter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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