Animated metric card.

components/MetricCard.js

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSpring, animated } from 'react-spring';
 import styles from './MetricCard.module.css';
 
-const MetricCard = ({ value, label }) => (
-  <div className={styles.card}>
-    <div className={styles.value}>{value}</div>
-    <div className={styles.label}>{label}</div>
-  </div>
-);
+function defaultFormat(n) {
+  return Number(n).toFixed(0);
+}
+
+const MetricCard = ({ value = 0, label, format = defaultFormat }) => {
+  const props = useSpring({ x: value, from: { x: 0 } });
+
+  return (
+    <div className={styles.card}>
+      <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
+      <div className={styles.label}>{label}</div>
+    </div>
+  );
+};
 
 export default MetricCard;