countup

package.json

@@ -10,6 +10,7 @@
     "js-cookie": "^2.1.3",
     "qs": "^6.2.0",
     "react": "^15.4.1",
+    "react-countup": "^1.3.0",
     "react-dom": "^15.4.1",
     "recharts": "^0.19.0"
   },

src/components/dashboard/numberCard.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 import { Icon, Card } from 'antd'
+import CountUp from 'react-countup'
 import styles from './numberCard.less'
 
 function NumberCard(props) {
@@ -9,7 +10,17 @@ function NumberCard(props) {
       <Icon className={styles.iconWarp} style={{ color }} type={icon} />
       <div className={styles.content}>
         <p className={styles.title}>{title || 'No Title'}</p>
-        <p className={styles.number}>{number || '10,000'}</p>
+        <p className={styles.number}>
+          <CountUp
+            start={0}
+            end={number}
+            duration={2.75}
+            useEasing={true}
+            useGrouping={true}
+            separator=","
+            {...props.countUp||{}}
+          />
+        </p>
       </div>
     </Card>
   )

src/routes/dashboard.js

@@ -11,25 +11,25 @@ const numberCardData = [
     icon: 'dot-chart',
     color: color.green,
     title:'Online Review',
-    number:'2,781'
+    number:2781
   },
   {
     icon: 'pay-circle-o',
     color: color.blue,
     title:'New Customers',
-    number:'3,241'
+    number:3241
   },
   {
     icon: 'message',
     color: color.purple,
     title:'Active Projects',
-    number:'253'
+    number:253
   },
   {
     icon: 'paper-clip',
     color: color.red,
     title:'Referrals',
-    number:'4,324'
+    number:4324
   }
 ]
 

yarn.lock

@@ -1364,6 +1364,10 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
+countup.js@^1.7.1:
+  version "1.7.1"
+  resolved "http://registry.npm.taobao.org/countup.js/download/countup.js-1.7.1.tgz#918954f9192e72ed9ec03bae63af8cd577c4362e"
+
 crequire@^1.7.0:
   version "1.7.0"
   resolved "http://registry.npm.taobao.org/crequire/download/crequire-1.7.0.tgz#8e7d83b18ceab79ffacbec9871574bbf507e7d9a"
@@ -4251,11 +4255,24 @@ rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
+react-addons-shallow-compare@^15.3.2:
+  version "15.4.1"
+  resolved "http://registry.npm.taobao.org/react-addons-shallow-compare/download/react-addons-shallow-compare-15.4.1.tgz#b68103dd4d13144cb221065f6021de1822bd435a"
+
 "react-addons-transition-group@^0.14.0 || ^15.0.0":
   version "15.4.1"
   resolved "http://registry.npm.taobao.org/react-addons-transition-group/download/react-addons-transition-group-15.4.1.tgz#27d92717089c5e2db202e654a85b76a41b703acc"
 
-react-dom@^15.4.1:
+react-countup:
+  version "1.3.0"
+  resolved "http://registry.npm.taobao.org/react-countup/download/react-countup-1.3.0.tgz#6c245b3f6b77a8d54c5492e5c15e32adee976ed3"
+  dependencies:
+    countup.js "^1.7.1"
+    react "^15.3.2"
+    react-addons-shallow-compare "^15.3.2"
+    react-dom "^15.3.2"
+
+react-dom@^15.3.2, react-dom@^15.4.1:
   version "15.4.1"
   resolved "http://registry.npm.taobao.org/react-dom/download/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
   dependencies:
@@ -4342,7 +4359,7 @@ react-smooth@^0.1.15:
     raf "^3.2.0"
     react-addons-transition-group "^0.14.0 || ^15.0.0"
 
-react@^15.4.1:
+react@^15.3.2, react@^15.4.1:
   version "15.4.1"
   resolved "http://registry.npm.taobao.org/react/download/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
   dependencies: