📅  最后修改于: 2023-12-03 15:04:50.114000             🧑  作者: Mango
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 用户的热力图概览 |
你可以使用 theme
属性来覆盖默认的 CSS 样式。以下是可用的 CSS 类名:
.calendarContainer
: 组件的容器.graphContainer
: 热力图的容器.day
: 每一个热力图方块.month
: 每一个月份的标题你可以点击该组件的 GitHub 仓库地址 来查看详细的示例和文档。