@unified-heatmap/react

React component for rendering the Unified Heatmap of your coding activity across GitHub, Codeforces, and other platforms.

Installation

npm install @unified-heatmap/react
# or
pnpm add @unified-heatmap/react

Usage

Pass the data fetched by @unified-heatmap/core to the <UnifiedHeatmap /> component. This component does not make any network calls and assumes you have already fetched the data securely (e.g. from your server-side API or static build).

import { UnifiedHeatmap } from '@unified-heatmap/react';

// Example data shape received from your server/API
const heatmapData = {
  days: [
    { date: '2023-10-01', total: 5, breakdown: { github: 3, codeforces: 2 } },
    // ...
  ],
  sources: [],
  generatedAt: '2023-10-02T00:00:00Z'
};

export default function MyPortfolio() {
  return (
    <div>
      <h2>My Coding Activity</h2>
      <UnifiedHeatmap 
        data={heatmapData}
        labels={{
          github: 'Commits',
          codeforces: 'CF Submissions',
          leetcode: 'LC Submissions'
        }}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | data | UnifiedHeatmapResult | Required | The JSON result generated by @unified-heatmap/core. | | labels | Record<string, string> | {} | Custom labels for platforms in the hover tooltips. | | colorScale | string[] | GitHub-like green | An array of 5 color strings ranging from 0 activity to high activity. |

Accessibility

• The SVG container has role="group" and aria-label.
• Every cell uses tabIndex={0} to be focusable by keyboards.
• Tooltips are rendered via standard <title> tags for screen readers, and a custom tooltip overlay is shown for sighted users on both hover and focus.