use-react-GFG

A tiny fully customizable react hook which gives you full profile details of Geeks for Geeks coder.

Detail Blog Posts

bamacharan.hashnode.dev/introducing-react-gfg dev.to/bamacharan/introducing-react-gfg

Install

• npm

npm install use-react-gfg

• yarn

yarn add use-react-gfg

Usage

A simple example of a component which you can copy-paste and take info about all Profiles.

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 <div>Loading...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  if (!profile || !profile.info) {
    return <div>Error: Profile data not found.</div>;
  }

  const { info, solvedStats } = profile;

  return (
    <div className="profile">
      <div className="basic-info">
        <h1>{info.userName}'s Profile</h1>
        {info.profilePicture && (
          <img src={info.profilePicture} alt="Profile Picture" />
        )}
        <p>Institute Rank: {info.instituteRank}</p>
        <p>Current Streak: {info.currentStreak}</p>
        <p>Max Streak: {info.maxStreak}</p>
        <p>Languages Used: {info.languagesUsed}</p>
      </div>

      <div className="solved-stats">
        <h2>Solved Stats</h2>
        <ul>
          {Object.entries(solvedStats).map(([difficulty, stats]) => (
            <li key={difficulty}>
              <h3>{difficulty}</h3>
              <p>Count: {stats.count}</p>
              {/* You can render individual questions here if needed */}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default ProfileInterface;

API

• Profile interface

{
  "info": {
    "userName": "string",
    "profilePicture": "string",
    "instituteRank": "string",
    "currentStreak": "string",
    "maxStreak": "string",
    "institution": "string",
    "languagesUsed": "string",
    "codingScore": "string",
    "totalProblemsSolved": "string",
    "monthlyCodingScore": "string",
    "articlesPublished": "string"
    // Add any additional fields as needed
  },
  "solvedStats": {
    "school": {
      "count": "number",
      "questions": [
        {
          "question": "string",
          "questionUrl": "string"
        }
      ]
    },
    "basic": {
      "count": "number",
      "questions": [
        {
          "question": "string",
          "questionUrl": "string"
        }
      ]
    },
    "easy": {
      "count": "number",
      "questions": [
        {
          "question": "string",
          "questionUrl": "string"
        }
      ]
    },
    "medium": {
      "count": "number",
      "questions": [
        {
          "question": "string",
          "questionUrl": "string"
        }
      ]
    },
    "hard": {
      "count": "number",
      "questions": [
        {
          "question": "string",
          "questionUrl": "string"
        }
      ]
    }
  }
}

Authors

• Bama Charan Chhandogi

License

MIT © Bama

---