CryptoTracker in 70 lines of code!

🏗 Setup Project

Let's get this started by setting up the react project and installing the required package.

npx create-react-app cryptotracker
cd cryptotracker
npm i ez-react-table

🤑 Create Tracker

Open up src/App.js in your favorite editor and delete everything in it. Let's start from scratch.

Call CoinGecko API

import React, { useState, useEffect } from "react";
import EzReactTable from 'ez-react-table'

export default function App() {
  const [coins, setCoins] = useState([]);
  const fetchCoins = async () => {
    try {
      const res = await fetch(
        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
      );
      const data = await res.json();
      setCoins(data);
    } catch (e) {
      alert("Api error");
    }
  };
  useEffect(() => {
    fetchCoins();
  }, []);
...

What we are doing is setting up a coins state that defaults to an empty array. Once the App component mounts we run the fetchCoins function. The fetchCoins function calls the Coin Gecko API and sets coins to the array of crypto coins.

Configure Columns

Next up, let's configure the columns variable that will be passed to ez-react-table and tell it how to render the coins state to a table.

...
  const columns = [
    {
      title: "Name",
      key: "name",
      width: 200,
      render: (value, object) => {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            <img height="20px" width="20px" src={object?.image} alt="coin" />
            <span style={{ marginLeft: "10px" }}>{object?.name}</span>
          </div>
        );
      },
    },
    {
      title: "Symbol",
      center: true,
      key: "symbol",
      width: 120,
      render: (value, object) => <div>{value.toUpperCase()}</div>,
    },
    {
      title: "Price",
      key: "current_price",
      width: 100,
      render: (value, object) => <div>{`$${value}`}</div>,
    },
    {
      title: "Change",
      key: "price_change_percentage_24h",
      width: 100,
      render: (value, object) => {
        return (
          <div style={{ color: /-/i.test(value) ? "#ff0374" : "#06a847" }}>
            {value}%
          </div>
        );
      },
    },
  ];
...

Couple of points of interest with the above code. The columns variable is an array of column objects. Each object defines the title for the column, the width of the column, the key name corresponds to the object property we are mapping to a column, and the render method takes a component which receives 2 arguments, the value of the current property and the object for the row. The component returns whatever should be rendered to the row cell. Take note that you could forego the render property altogether and ez-react-table would render the value to the cell.

Putting It All Together

...
return (
    <EzReactTable
      cols={columns}
      data={coins}
      darkMode
      title="Crypto Tracker"
      defaultSort="name"
      accentColor="#ffbc03"
      tableHeight={300}
    />
  );
};

Finally! Return the EzReactTable component. The cols property gets the columns variable we defined. The data property takes the coins state to be rendered. The defaultSort property is a key defined in the columns variable we'd like to default to sorting the table by. There are a few self explanatory properties as well.

👟 Run it!

Okay the code is done! Let's test it out by running npm start in the project directory and navigating to localhost:3000.

Bask in the glory! Virtualized rows, a global search input, column sorting, and style with almost no effort!

Here is the git repo if you'd like to look at the code.

🔮 What's Next?

The secret sauce for this article was ez-react-table. The package is built to be straight forward to use and powerful.

Try ez-react-table on your next project!

Thanks for coding along!