Package Exports

react-count-animation

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-count-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-count-animation

Using TWEEN algorithm, digital animation based on react.

Display

display

Install

npm install react-count-animation@latest

How to use

import stylesheet:

import 'react-count-animation/dist/count.min.css';

import React from 'react';
import ReactDOM from 'react-dom';
import AnimationCount from 'react-count-animation';

const Count = () => {
  const settings = {
    start: 99923,
    count: 9999999,
    duration: 3000,
    decimals: 4,
    useGroup: true,
    animation: 'up',
  };
  const settings2 = {
    start: 1,
    count: 9999999,
    duration: 1000,
    decimals: 2,
    useGroup: true,
    animation: 'roll',
  };
  const settings3 = {
    start: 1,
    count: 9999999,
    duration: 3000,
    decimals: 2,
    useGroup: true,
    animation: 'slide',
  };
  return (
    <div>
      <h1 className="title">Count Animation</h1>
      <div className="exam-div">
        <AnimationCount {...settings}/>
      </div>
      <h1 className="title">Count Roll</h1>
      <div className="exam-div">
        <AnimationCount {...settings2}/>
      </div>
      <h1 className="title">Count Slide</h1>
      <div className="exam-div">
        <AnimationCount {...settings3} />
      </div>
    </div>
  );
}

export default Count;

Options

Property	Type	Description
start	Number	Initial value
count	Number	target value
duration	Number	Animation time length, in milliseconds
decimals	Number	decimals
useGroup	bool	Whether to use ',' the number of segments
animation	string	Animation effects: 'up' => 'CountUp'; 'roll' => 'CountRoll' 'slide' => 'CountSlide'

License

MIT