Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bamacharanchhandogi/use-react-gfg
A tiny fully customizable react hook which gives you full profile details of Geeks for Geeks coder.
https://github.com/bamacharanchhandogi/use-react-gfg
gfg-data gfg-profile-data package react-custom-hook react-hooks react-package
Last synced: 10 days ago
JSON representation
A tiny fully customizable react hook which gives you full profile details of Geeks for Geeks coder.
- Host: GitHub
- URL: https://github.com/bamacharanchhandogi/use-react-gfg
- Owner: BamaCharanChhandogi
- License: mit
- Created: 2024-03-21T07:17:23.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-08-15T17:54:37.000Z (3 months ago)
- Last Synced: 2024-10-11T20:18:59.626Z (26 days ago)
- Topics: gfg-data, gfg-profile-data, package, react-custom-hook, react-hooks, react-package
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/use-react-gfg
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-react-GFG
use-react-gfg is a lightweight and customizable React hook that fetches and displays a complete profile of any Geeks for Geeks user. This hook makes it easy to integrate GFG profile data into your React applications, offering a straightforward way to access and display coding statistics and achievements
[](https://www.npmjs.com/package/use-react-gfg)
[](https://standardjs.com)
[](https://www.npmjs.com/package/use-react-gfg)
[](https://github.com/bamaCharanChhandogi/use-react-gfg/blob/main/LICENSE)
## Features
- **Full Profile Data Fetching:** Retrieve detailed profile information including user stats, coding score, solved problem counts, and more.
- **Customizable UI:** The hook allows easy integration into your existing React components with full control over the display of profile data.
- **Error Handling:** Built-in error handling to manage issues with fetching data from the GFG API.
- **Lightweight:** Minimal dependencies ensure quick and easy installation with minimal impact on your app’s performance
## Detailed Blog Posts
- [Introducing React-GFG: Fetch Your Geek for Geeks Profile Details with Ease](https://bamacharan.hashnode.dev/introducing-react-gfg-fetch-your-geek-for-geeks-profile-details-with-ease)
- [Dev.to: Introducing React-GFG](https://dev.to/bamacharan/introducing-react-gfg-fetch-your-geek-for-geeks-profile-details-with-ease-3ajc)
## Installation
- npm
```bash
npm install use-react-gfg
```
- yarn
```bash
yarn add use-react-gfg
```
## Usage
Here's a simple example of how to use the useGFG hook:
```jsx
import React, { useEffect } from "react";
import {useGFG} from "use-react-gfg";
function ProfileInterface() {
const { profile, loading, error } = useGFG("bamacharan");
useEffect(() => {
console.log("Profile Data:", profile);
}, [profile]);
if (loading) {
return
Loading...;
}
if (error) {
return
{error};
}
if (!profile || !profile.info) {
return
Error: Profile data not found.;
}
const { info, solvedStats } = profile;
return (
{info.userName}'s Profile
{info.profilePicture && (
)}
Institute Rank: {info.instituteRank}
Current Streak: {info.currentStreak}
Max Streak: {info.maxStreak}
Languages Used: {info.languagesUsed}
Solved Stats
{Object.entries(solvedStats).map(([difficulty, stats]) => (
-
{difficulty}
Count: {stats.count}
{/* You can render individual questions here if needed */}
))}
);
}
export default ProfileInterface;
```
## API
### Hook: useGFG
```javascript
const { profile, loading, error } = useGFG(username: string);
```
### Parameters:
- `username (string):` The GeeksforGeeks username to fetch profile data for.
### Returns:
- `profile (object):` The user's profile data (see Profile Interface below).
- `loading (boolean):` Indicates if the data is being fetched.
- `error (string | null):` Contains an error message if the fetch fails, otherwise null.
## Profile interface
```javascript
interface Profile {
info: {
userName: string;
profilePicture: string;
instituteRank: string;
currentStreak: string;
maxStreak: string;
institution: string;
languagesUsed: string;
codingScore: string;
totalProblemsSolved: string;
monthlyCodingScore: string;
articlesPublished: string;
};
solvedStats: {
[key: string]: {
count: number;
questions: Array<{
question: string;
questionUrl: string;
}>;
};
};
}
```
## Contributions
Contributions are welcome! If you have suggestions or encounter any issues, please feel free to [open an issue](https://github.com/BamaCharanChhandogi/use-react-gfg) or submit a pull request.
## Authors
- [Bama Charan Chhandogi](https://linktr.ee/bamacharan)
## License
MIT © [Bama](LICENSE)
If you find this package helpful, please consider giving it a star on GitHub! ⭐