React/Material-UIのCardでカウントアップ

12218 ワード
React material-ui React テキストリンク

react-countupで実装。

./src/App.js
import logo from "./logo.svg";
import "./App.css";
import { Card, CardContent, Grid, Typography } from "@material-ui/core";
import LocalHospitalIcon from "@material-ui/icons/LocalHospital";
import CloseIcon from "@material-ui/icons/Close";
import DirectionsRunIcon from "@material-ui/icons/DirectionsRun";
import FavoriteIcon from "@material-ui/icons/Favorite";
import CountUp from "react-countup";

function App() {
  return (
    <div>
      <Grid container spacing={1}>
        <Grid item xs={3} color="primary">
          <Card style={{ backgroundColor: "#0095d9" }}>
            <CardContent>
              <Typography variant="h5">
                <CountUp start={622273 - 1000} end={622273} separator="," />
              </Typography>
              <Typography>
                <LocalHospitalIcon />
                Confirmed
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={3}>
          <Card style={{ backgroundColor: "#e60033" }}>
            <CardContent>
              <Typography variant="h5">
                <CountUp start={10566 - 1000} end={10566} separator="," />
              </Typography>
              <Typography>
                <CloseIcon />
                Deaths
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={3}>
          <Card style={{ backgroundColor: "#3eb370" }}>
            <CardContent>
              <Typography variant="h5">
                <CountUp start={542413 - 1000} end={542413} separator="," />
              </Typography>
              <Typography>
                <DirectionsRunIcon />
                Recovered
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={3}>
          <Card style={{ backgroundColor: "#ffd900" }}>
            <CardContent>
              <Typography variant="h5">
                <CountUp start={69294 - 1000} end={69294} separator="," />
              </Typography>
              <Typography>
                <FavoriteIcon />
                Active
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </div>
  );
}

export default App;