react-github-contribution-calendar

react-github-contribution-calendar 是一个可以在 React 应用中使用的 GitHub 贡献热力图组件。使用该组件，你可以在你的网页上展示你的 GitHub 贡献情况，类似于 GitHub 主页中的热力图展示。该组件使用了 GitHub Contributions API 来获取用户的贡献数据。

安装

要安装 react-github-contribution-calendar，你可以使用 npm:

npm install react-github-contribution-calendar

使用

首先，在你的 React 应用中，你需要导入和渲染该组件：

import React from 'react';
import ReactDOM from 'react-dom';
import GithubContributionCalendar from 'react-github-contribution-calendar';

ReactDOM.render(
  <GithubContributionCalendar username="Your GitHub username" />,
  document.getElementById('root')
);

你需要将 username 属性替换成你要展示热力图的 GitHub 用户名。

参数

GithubContributionCalendar 组件接受以下参数：

| 参数名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | username | string | N/A | 你要展示热力图的 GitHub 用户名 | | blockSize | number | 12 | 方块的尺寸（以像素为单位） | | blockMargin | number | 2 | 方块之间的边距（以像素为单位） | | horizontal | boolean | false | 决定方块是在水平方向还是垂直方向排列 | | theme | object | N/A | 自定义 CSS 样式 | | years | number | 1 | 展示的贡献数据的年数 | | overview | boolean | false | 是否展示整个 GitHub 用户的热力图概览 |

自定义 CSS 样式

你可以使用 theme 属性来覆盖默认的 CSS 样式。以下是可用的 CSS 类名：

• .calendarContainer: 组件的容器
• .graphContainer: 热力图的容器
• .day: 每一个热力图方块
• .month: 每一个月份的标题

示例

你可以点击该组件的 GitHub 仓库地址 来查看详细的示例和文档。