GitHub provides a powerful API that allows developers to access and interact with various data from GitHub repositories, users, and more. In this tutorial, we will explore how to use the GitHub API with personal access tokens to fetch user data, and we will also integrate the GitHub Calendar library to visualize user contributions over time.
Table of Contents
- Introduction to GitHub API and Personal Access Tokens
- Generating a Personal Access Token
- Fetching User Data using GitHub API
- Integrating GitHub Calendar Library
- Conclusion
1. Introduction to GitHub API and Personal Access Tokens
The GitHub API offers endpoints that allow developers to programmatically interact with GitHub resources such as repositories, issues, and users.
ADVANTAGES OF USING PERSONAL TOKENS
- Personal access tokens provide a secure and standardized way to authenticate and authorize users or applications when interacting with the GitHub API.
2.GitHub API requests are subject to rate limits. By using a personal access token, applications can make authenticated requests, which usually have higher rate limits compared to unauthenticated requests.
and much more...
2. Generating a Personal Access Token
To generate a personal access token, follow these steps:
- Log in to your GitHub account.
- Go to your GitHub Settings.
- Select Developer settings from the left sidebar, and then click on Personal access tokens.
- Click on the Generate new token button. Give your token a meaningful name and select the scopes (permissions) you need.
- Click the Generate token button at the bottom.
Make sure to copy your generated token immediately, as you won't be able to see it again.
3. Fetching User Data using GitHub API
Now that we have our personal access token, let's use it to fetch user data from the GitHub API.
We'll use the axios library to make HTTP requests. If you haven't installed it, you can do so using:
npm install axios
Here's how to fetch user data using the GitHub API and your personal access token:
// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const App = () => {
const [userData, setUserData] = useState({});
useEffect(() => {
const token = 'YOUR_PERSONAL_ACCESS_TOKEN';
axios.get('https://api.github.com/user/yourgithubUserName', {
headers: {
Authorization: `token ${token}`,
},
})
.then(response => {
setUserData(response.data);
})
.catch(error => {
console.error('Error fetching user data:', error);
});
}, []);
return (
<div>
<h1>GitHub User Data</h1>
<div>{JSON.stringify(userData, null, 2)}</pre>
</div>
);
};
export default App;
Replace 'YOUR_PERSONAL_ACCESS_TOKEN' with the actual personal access token you generated.
You can create your own Card to display the user data like username,profile pic,bio,public repos,etc
It would look like this
*You can also use the repo api to get all the information about repostiories:
*
Just replace the api link with https://api.github.com/user/yourgithubUserName/repos
4. Integrating GitHub Calendar Library
The GitHub Calendar library allows you to visualize a user's contributions (commits, pull requests, issues, etc.) over time in a calendar heatmap.
To integrate the GitHub Calendar library, we'll use the react-github-calendar package. Install it using:
npm install react-github-calendar
Here's how to integrate the GitHub Calendar library into your React app:
// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import GitHubCalendar from 'react-github-calendar';
const App = () => {
const [userData, setUserData] = useState({});
useEffect(() => {
const token = 'YOUR_PERSONAL_ACCESS_TOKEN';
axios.get('https://api.github.com/user', {
headers: {
Authorization: `token ${token}`,
},
})
.then(response => {
setUserData(response.data);
})
.catch(error => {
console.error('Error fetching user data:', error);
});
}, []);
return (
<div>
<h1>GitHub User Data</h1>
<pre>{JSON.stringify(userData, null, 2)}</pre>
{userData.login && (
<div>
<h2>GitHub Contributions Calendar</h2>
<GitHubCalendar
username={userData.login}
blockSize={15}
blockMargin={2}
/>
</div>
)}
</div>
);
};
export default App;
Replace 'YOUR_PERSONAL_ACCESS_TOKEN' with your actual personal access token.
This is how it looks:
Refer the official github repo for more more information :
grubersjoe / react-github-calendar
A React component to display a GitHub contributions calendar
React GitHub Calendar
A React component to display a GitHub contributions graph based on
react-activity-calendar
and
github-contributions-api
.
Installation
pnpm install react-github-calendar
Development
Start watch mode for the library first:
pnpm install
pnpm dev
Then start watch mode of example page:
cd example
pnpm install
pnpm dev
Open http://localhost:3000.
Publish a new release
npm publish --dry-run
# When you're happy
npm publish --access=public
Update demo page
pnpm run deploy
The owner of the repo has also created a website for calendar and visualization and customizations you can do.
5. Conclusion
In this tutorial, we learned how to use the GitHub API with personal access tokens to fetch user data and integrate it with the GitHub Calendar library. We generated a personal access token, used it to authenticate API requests, fetched user data, and visualized GitHub contributions over time using the calendar heatmap.
Top comments (0)