Visualizing GitHub Activity with React Activity Calendar

How to display Github activities data

React Activity Calendar is a powerful npm package that allows you to represent GitHub contribution data in a visually compelling way. In this tutorial, we will explore how to use this package in a real-life application to display GitHub activities.

To begin with, install the package using either npm or yarn:

npm install react-activity-calendar
or
yarn add react-activity-calendar

Fetching the Data

Before we can visualize the data, we need to fetch it. In the Page.tsx file, we make an asynchronous call to the github-contributions-api, which returns a user's contributions. The data is then passed to the GithubActivities component as a prop.

const getGitContributions = async () => {
	const res = await axios.get(
		'https://github-contributions-api.jogruber.de/v4/tanselberkant?y=last'
	)
	return res
}

Creating the Activity Calendar In the GithubActivities.tsx file, we import the ActivityCalendar component from react-activity-calendar. This component takes several props, such as theme, data, and labels.

The data prop is the contributions data we fetched earlier. The labels prop lets you customize the texts in your activity calendar, and the theme prop allows you to set the colors for the activity levels.

import ActivityCalendar, { ThemeInput } from 'react-activity-calendar';

const GithubActivities = ({ contrubitions }: Props) => {
  return (
    <div className="my-14 ">
      <h2 className="text-2xl text-light-textHeader dark:text-dark-textHeader font-bold my-8">
        Github Contrubitions Info
      </h2>
      <div className="w-full flex items-center justify-center">
        <ActivityCalendar
          theme={explicitTheme}
          data={contrubitions.contributions}
          labels={{
            legend: {
              less: 'Less',
              more: 'More',
            },
            months: [
              'Jan',
              'Feb',
              'Mar',
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec',
            ],
            totalCount: `${
              contrubitions.total.lastYear
            } activities in ${new Date().getFullYear()}`,

            weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
          }}
          showWeekdayLabels={true}
        />
      </div>
    </div>
  );
}

In this code snippet, we use the contrubitions prop to display the fetched data. The labels prop is utilized to personalize the text displayed in the calendar.

Conclusion

And there you have it! With react-activity-calendar, you can effortlessly integrate a sleek, customizable GitHub activity visualizer into your React application. Keep in mind that the package offers many other customization options, so feel free to dive deeper to get the most out of this powerful tool!