react-ts-github-calendar

github-calendar wrapper component for react + typescript
You can use this component with Next.js too.

🇯🇵ja

☁️Installation

You can install it like every other library with yarn

yarn add -D react-ts-github-calendar

or with npm

npm install --save react-ts-github-calendar

📚Usage

Basic Example

The component work without any additional setup.

// App.tsx
import React from 'react';
import ReactGitHubCalendar from 'react-ts-github-calendar';

// your own component name
export const App: React.FC = () => {
  return <ReactGitHubCalendar userName="YOUR ACCOUNT NAME" />;
};

・ You have to pass userName to component.

Required

Name	Type	Description	Default
userName	String	The GitHub username	''

Options

Name	Type	Description	Default
responsive	Boolean	If true, the graph is changed to scale with the container. Custom CSS should be applied to the element to scale it appropriately.	false
tooltips	Boolean	If true, tooltips will be shown when hovered over calendar days.	false
global_stats	Boolean	If false, the global stats (total, longest and current streaks) will not be calculated and displayed.	true
summary_text	String	The text that appears under the calendar	"Summary of pull requests, issues opened, and commits made by USERNAME"
cache	Number	The cache time in seconds.	(24 * 60 * 60) *1000
proxy	Function	A function that receives as argument the userName and should return a promise resolving the HTML content of the contributions page. We need proxy for CORS.	The default is using @Bloggify's APIs.

Example

<ReactGitHubCalendar tooltips responsive/>
// tooltips = true, responsive = true

<ReactGitHubCalendar global_stats={false} cache={(12 * 60 * 60)*1000}/>

With Next.js

If you want to use this component with Next.js, you have to use dynamic import to avoid SSR.

const ReactGitHubCalendar = dynamic(() => import('react-ts-github-calendar'), {
  ssr: false,
});

Otherwise, you'll see the error

window is not defined

or

document is not defined

🚨Cation

Sometimes, Streak & Contribution do not working well. (display 0)
It may be fixed if you leave it for a few days (because sometimes the changes take a long time to be reflected) or if you delete the cache and reload it.