GithubGraph
The GithubGraph component is designed to display a Github contribution graph for a specified user. It uses the react-activity-calendar package to render the contribution graph.
PlaygroundOpen in
Installation
V3CN
pnpm dlx v3cn add github
Shadcn
pnpm dlx shadcn@latest add 'https://v3cn.vineet.pro/r/github'
Usage Examples
Default Usage
"use client"
import { useState } from "react";
import { GithubGraph } from "@/components/github";
const GithubGraphDemo = () => {
return (
<GithubGraph
username="vineetagarwal-code"
blockMargin={2}
lightColorPalette={["#1e1e2f", "#5a3e7a", "#7e5aa2", "#a87cc3", "#d9a9e6"]}
darkColorPalette={["#1e1e2f", "#5a3e7a", "#7e5aa2", "#a87cc3", "#d9a9e6"]}
/>
)
}
export { GithubGraphDemo };
When using compound components:
- Make sure that you have installed the dependencies and configured your project accordingly.
- Note: The code for the self-hosted API used to fetch contribution data is available here.
<Github Graph />
usernamestring
Default: " "required
GitHub username for which to fetch the contribution data.
blockMarginnumber
Default: 'once'
Margin between blocks in the contribution graph.
lightColorPalettestring[]
Default: ["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196127"]
Custom color scheme for the light theme.
darkColorPalettestring[]
Default: ["#1e1e2f", "#5a3e7a", "#7e5aa2", "#a87cc3", "#d9a9e6"]
Custom color scheme for the dark theme.