Installation

Install via npm

npm install react-animated-github-calendar

Usage

Import the AnimatedGithubCalendar component

import { AnimatedGithubCalendar } from 'react-animated-github-calendar';

Then use component to your web app

import { AnimatedGithubCalendar } from 'react-animated-github-calendar';

export const Home = () => {
    return (
        <>
            <AnimatedGithubCalendar username={'your-github-username'}/>
        </>
    );
}

You can also adjust tile size and margin for each tiles

import { AnimatedGithubCalendar } from 'react-animated-github-calendar';

export const Home = () => {
    return (
        <>
            <AnimatedGithubCalendar 
                username={'your-github-username'}
                blockSize={16} 
                blockMargin={5}
            />
        </>
    );
}

By default, the animateOnce is set to false which means that whenever it will enter the viewport, the staggering wave animation will play. If set to true, the animation will take effect only once if it enters the viewport and won't animate again once it enters the viewport.

import { AnimatedGithubCalendar } from 'react-animated-github-calendar';

export const Home = () => {
    return (
        <>
            <AnimatedGithubCalendar 
                username={'your-github-username'}
                blockSize={16} 
                blockMargin={5}
                animateOnce={false} // or true 
            />
        </>
    );
}