Integrate verified developer skill badges into your React portfolio with our easy-to-use component library.
Get started by installing the DevGrade React package:
Install the DevGrade Badge package via npm:
npm install devgrade-badge
Import and use the DevGradeBadge component with your GitHub username:
Import and use the DevGradeBadge component in your React application:
import { DevGradeBadge } from 'devgrade-badge';
function Portfolio() {
return (
<div>
<DevGradeBadge username="your-username" />
</div>
);
}Choose from three different badge styles to match your design:
Perfect for headers, sidebars, or anywhere space is limited.
<DevGradeBadge
variant="compact"
username="your-username"
dark={false}
roundness="lg"
/>Full-featured badge showing all metrics with progress bars.
<DevGradeBadge
variant="detailed"
username="your-username"
dark={false}
roundness="xl"
/>Clean, inline badge for seamless portfolio integration.
<DevGradeBadge
variant="minimal"
username="your-username"
dark={false}
roundness="sm"
/>Full TypeScript interface showing all available props:
All available props for the DevGradeBadge component:
interface DevGradeBadgeProps {
username: string; // Required: DevGrade username
variant?: 'compact' | 'detailed' | 'minimal';
dark?: boolean; // Enable dark theme
roundness?: 'sm' | 'md' | 'lg' | 'xl';
loading?: boolean; // Set loading state
error?: string | null; // Set error state dynamically while fetching
data?: { // Optional: provide custom data
codeQuality: number;
dominantLanguage: string;
githubProfile: string;
grade: 'S' | 'A' | 'B' | 'C' | 'D';
hireability: number;
intelligence: number;
};
}Use the DevGrade API directly to fetch developer metrics and build custom components:
Retrieve developer metrics using the DevGrade API endpoint:
"use client";
import { useState, useEffect } from 'react';
// Custom hook to fetch DevGrade data
function useDevGradeData(username) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const LOCAL_STORAGE_KEY = 'x_devgrade_result_';
async function fetchData() {
try {
const storageKey = '${LOCAL_STORAGE_KEY}${username}';
const storedData = localStorage.getItem(storageKey);
if (storedData) {
setData(JSON.parse(storedData));
setLoading(false);
return;
}
const res = await fetch(`https://devgrade.vercel.app/api/dev-grade/${username}`);
const result = await res.json();
if (result.success) {
setData(result.devGrade);
localStorage.setItem(storageKey, JSON.stringify(result.devGrade));
}
if (result.error) {
setError(result.error);
}
} catch (err) {
if (err instanceof Error) {
setError(err.message);
} else {
setError('An unknown error occurred');
}
} finally {
setLoading(false);
}
}
fetchData();
}, [username]);
return { data, loading, error };
}
// Example usage in component
function CustomBadge({ username }) {
const { data, loading, error } = useDevGradeData(username);
return (
<DevGradeBadge
loading={loading}
roundness="sm"
data={data}
error={error}
dark={true}
variant="detailed"
/>
);
}Example showing how to integrate the badge in a Next.js application:
Example integration in a Next.js portfolio page:
'use client';
import { DevGradeBadge } from 'devgrade-badge';
import { useDevGradeData } from '@hooks/useDevGradeDataHook';
export default function AboutPage() {
const { data, loading, error } = useDevGradeData(username);
return (
<section className="py-16">
<div className="container mx-auto">
<h1>About Me</h1>
<p>I'm a full-stack developer...</p>
<DevGradeBadge
loading={loading}
roundness="sm"
data={data}
error={error}
dark={true}
variant="detailed"
/>
</div>
</section>
);
}The badge uses Tailwind CSS classes and respects your site's dark mode settings automatically.
All variants are fully responsive and work great on mobile devices.
Badges include clickable GitHub profile links and hover effects for better user engagement.
Built with semantic HTML and ARIA labels for screen reader compatibility.