Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grubersjoe/react-github-calendar
A React component to display a GitHub contributions calendar
https://github.com/grubersjoe/react-github-calendar
contribution-graph github react
Last synced: 6 days ago
JSON representation
A React component to display a GitHub contributions calendar
- Host: GitHub
- URL: https://github.com/grubersjoe/react-github-calendar
- Owner: grubersjoe
- License: mit
- Created: 2018-10-11T12:52:21.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-02-03T18:20:15.000Z (17 days ago)
- Last Synced: 2025-02-07T06:11:06.166Z (13 days ago)
- Topics: contribution-graph, github, react
- Language: TypeScript
- Homepage: https://grubersjoe.github.io/react-github-calendar
- Size: 15.1 MB
- Stars: 502
- Watchers: 5
- Forks: 44
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React GitHub Calendar
[](https://github.com/grubersjoe/react-github-calendar/actions/workflows/test.yml)
A React component to display a GitHub contributions graph based on
[`react-activity-calendar`](https://github.com/grubersjoe/react-activity-calendar) and
[`github-contributions-api`](https://github.com/grubersjoe/github-contributions-api).
[Demo and documentation](https://grubersjoe.github.io/react-github-calendar/)
## Installation
```shell
npm install react-github-calendar
```
## Usage
```tsx
import GitHubCalendar from 'react-github-calendar'
;
```
## FAQ
### Is server side rendering (SSR) supported?
Yes. However, not with this component because it fetches data client-side. For SSR support, you can
fetch the GitHub contribution data from a suitable
[API](https://github.com/grubersjoe/github-contributions-api) server-side and pass it on to the
internally used [`react-activity-calendar`](https://github.com/grubersjoe/react-activity-calendar)
component. See the
[source code](https://github.com/grubersjoe/react-github-calendar/blob/main/src/index.tsx) as
example and the GitHub color theme.
### Why is Create React App unsupported?
Create React App (CRA) is considered
[abandoned](https://github.com/facebook/create-react-app/discussions/11086), and you probably should
not use it anymore (more
[background](https://github.com/facebook/create-react-app/issues/11180#issuecomment-874748552)).
Using this component inside CRA will lead to errors for reasons described in issue
[#105](https://github.com/grubersjoe/react-activity-calendar/issues/105) of
`react-activity-calendar`. This repo is not for CRA support questions. If you encounter issues, you
need to fix those yourself given the maintenance state of CRA. Personally, I would recommend using
[Vite](https://vitejs.dev/) instead of CRA. It offers everything that CRA does and more.
## Development
Start watch mode for the library first:
```shell
npm install
npm dev
```
Then start watch mode of example page:
```shell
cd example
npm install
npm dev
```
Open http://localhost:3000.
### Publish a new release
```shell
npm publish --dry-run
# When you're happy
npm publish --access=public
```
### Update demo page
```shell
npm run deploy
```