![Visualizing GitHub Activity with React Activity Calendar-img](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F7lvb0u5s%2Fproduction%2F164cf17fee15fe3b6396f91fd521bc8eb6e8affc-748x316.png&w=3840&q=75)
Visualizing GitHub Activity with React Activity Calendar
June 20, 2023
![Tansel Berkant Oflaz](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F7lvb0u5s%2Fproduction%2Feb2e8bd13c971d65286fe6b1008a179d5e457d6c-750x768.jpg&w=256&q=75)
Tansel Berkant Oflaz
How to Display Github Activites Data on our page
React.js
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.
![Blog Post Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F7lvb0u5s%2Fproduction%2Fae6d0a88601198b218aaf6e28b54ad0c8908c051-1280x332.png&w=3840&q=75)
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.
![Blog Post Image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F7lvb0u5s%2Fproduction%2Fa579b5aeb20a8ac41d0905653b9030d69fd9e824-1468x896.png&w=3840&q=75)
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!