📜  react-github-contribution-calendar - Shell-Bash (1)

📅  最后修改于: 2023-12-03 15:04:50.114000             🧑  作者: Mango

react-github-contribution-calendar

GitHub issues GitHub forks GitHub stars GitHub license

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 仓库地址 来查看详细的示例和文档。