react-github-heatmap
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

react-github-heatmap

npm version

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

Buy Me A Coffee

Package Sidebar

Install

npm i react-github-heatmap

Weekly Downloads

1

Version

1.0.7

License

MIT

Unpacked Size

80.7 kB

Total Files

8

Last publish

Collaborators

  • marcelovicentegc