1.7.9 • Published 1 year ago

react-animated-counter v1.7.9

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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

Built to support the chart hover tooltip on https://financhle.com - If you'd like to this component live in-action on a 5 year stock chart feel free to take a peek.

Installation

npm install react-animated-counter

Usage

Props:

NameTypeDescriptionDefault
valueintegerThe state integer value0
fontSizestringApplied css font-size18px
colorstringApplied css colorblack
incrementColorstringAnimation color when value increases#32cd32
decrementColorstringAnimation color when value decreases#fe6862
includeDecimalsbooleanIncludes or removes decimal point values in provided value (rounds to nearest hundredth by default)true
decimalPrecisionbooleanThe nth decimal place of precision (ex. 5 will calculate number to the nearest hundred thousandth)2
includeCommasbooleanAdds comma separators to every third digit to the left of the decimal point used in numbers with four or more digitsfalse
containerStylesCSSPropertiesStyles to apply to the parent element of the main component. Used in same fashion as react styles{}
digitStylesCSSPropertiesStyles to apply to individual digit elements. Used in same fashion as react styles{}

Basic Demo:

Codesandbox Link: https://codesandbox.io/p/sandbox/clever-water-v5nwwx

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

1.7.9

1 year ago

1.7.8

1 year ago

1.7.7

1 year ago

1.7.6

1 year ago

1.7.5

1 year ago

1.7.4

1 year ago

1.7.3

2 years ago

1.7.2

2 years ago

1.7.1

2 years ago

1.6.4

2 years ago

1.4.6

2 years ago

1.6.3

2 years ago

1.4.5

2 years ago

1.6.2

2 years ago

1.4.4

2 years ago

1.6.1

2 years ago

1.4.3

2 years ago

1.6.0

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.5.9

2 years ago

1.5.8

2 years ago

1.5.7

2 years ago

1.3.9

2 years ago

1.5.6

2 years ago

1.3.8

2 years ago

1.5.5

2 years ago

1.3.7

2 years ago

1.5.4

2 years ago

1.3.6

2 years ago

1.5.3

2 years ago

1.3.5

2 years ago

1.7.0

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.3.3

2 years ago

1.5.0

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.6.9

2 years ago

1.6.8

2 years ago

1.6.7

2 years ago

1.4.9

2 years ago

1.6.6

2 years ago

1.4.8

2 years ago

1.6.5

2 years ago

1.4.7

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago