react-floating-profile

React component to display your github profile

✨ Features

• 🪄 Floating UI: Easily attach a floating user profile anywhere on your screen.
• 🧠 Context API Powered: No external state management libraries required.
• 🛠️ TypeScript Support: Full type safety and autocompletion.
• 💅 GitHub-style UI: Comes with a simple and clean interface inspired by GitHub.

📦 Installation

npm install react-floating-profile

🚀 Quck Start

import ReactFloatingProfile from "react-floating-profile";

function App() {
  return (
    <ReactFloatingProfile
      userName="John Doe" // required
      accessToken="your_token_here"
      // 💡 accessToken is not required, but it's recommended to avoid GitHub API rate limits.
      pinnedRepoArr={["repo1", "repo2"]}
      location="top-right"
    />
  );
}

You can get a token here Check the read:user permission

Props

| Prop Name | Type | Required | Default | Description | |----------------|----------------------------------------------------------------------|----------|------------------|-----------------------------------------------------------------------------| | userName | string | ✅ | — | GitHub username to fetch and display profile information. | | pinnedRepoArr | [] | [string] | [string, string] | [string, string, string] | [string, string, string, string] | ❌ | [] | List of pinned repositories to display. Supports up to 4 items. | | location | "top-right" | "top-left" | "bottom-right" | "bottom-left" | ❌ | "bottom-right" | Position of the floating widget on the screen. | | accessToken | string | ❌ | "" | GitHub access token to increase API request limits. Recommended but optional. |

💡 Contribution

Contributions are always welcome and there are absolutely no restrictions! Feel free to open issues, suggest features, or submit pull requests anytime. 🙌