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.

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.

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!