react-github-heatmap

A plugable React component to display a general purpose GitHub-like contributions graph based on SVG.

📦 Install

npm i react-github-heatmap

yarn add react-github-heatmap

🔨 Usage

Take a glance at the docs to see further examples 😉.

import React from 'react';
import { Heatmap, HeatmapData } from 'react-github-heatmap';
import { api } from './api';

const App = () => {
  const [data, setData] = React.useState<HeatmapData>();
  const [isLoading, setIsLoading] = useState(false);
  React.useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    setIsLoading(true);
    await api
      .getData()
      .then(data => {
        setData(data);
      })
      .catch(error => {
        alert(error.message);
      })
      .finally(() => setIsLoading(false));
  };

  return (
    <>
      {isLoading && <span>Loading...</span>}
      {data && <Heatmap data={data} />}
    </>
  );
};

🚧 Development directions

1. Clone this repo: git clone git@github.com:marcelovicentegc/react-github-heatmap.git
2. Install dependencies: yarn
3. Build the app: yarn build
4. Change directory into example and install its dependencies: cd example && yarn
5. From inside the example folder, start the app: yarn start