Nodeschool Public Materials

    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

    Install

    npm i react-github-heatmap

    DownloadsWeekly Downloads

    3

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    80.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • marcelovicentegc