Package Exports

react-animated-counter
react-animated-counter/dist/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

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

Required dependencies

React Animated Counter's sole dependency is framer-motion, a lightweight animation library.

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:

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

const App = () => {

  // When counterValue increases, increment animation triggers.
  // When counterValue decreases, decrement animation triggers.
  const [counterValue, setCounterValue] = useState(500);

  return (
    <AnimatedCounter
      value={counterValue}
      color='white'
      fontSize='40px'
    />
  );
}

Output:

With recharts Demo:

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

Output:

react-animated-counter recharts demo