[React] react-github-calendar 사용하기

---

사용하게된 이유

백엔드에서 user에 github 정보를 받아오는데 잔디까지 가져오는데 어려움이 있어 직접 알아보니 프론트에서 react-github-calendar라는 라이브러리를 사용하면 간편하게 잔디를 가져올 수 있다고 한다.

---

설치

npm install react-github-calendar //npm 사용시
yarn add react-github-calendar //yarn 사용시

---

기본 사용

• username 부분에 원하는 유저에 이름을 입력해놓는다

import React from 'react';
import GitHubCalendar from "react-github-calendar"; 

const App = () => {
  return (
    <div>
      <GitHubCalendar username='유저이름'/>
    </div>
  );
};

export default App;

코드를 실행하면 아래 이미지와 같이 원하는 유저에 github 잔디를 가져온다

그외 옵션

year

• 원하는 년도를 설정 default는 작년

<GitHubCalendar year='2023'/>

color

• 잔디에 색깔 설정(가장 진한 색을 지정)

<GitHubCalendar color='#ffffff'/>

fontSize

• font 크기를 지정

<GitHubCalendar fontSize={19}/>

blockSize

• 잔디 블록의 크기를 지정

<GitHubCalendar blockSize={19}/>

blockMargin

• 잔디 블록 끼리의 margin 지정

<GitHubCalendar blockMargin={19}/>

blockRadius

• 잔디 블록의 border-radius 지정

<GitHubCalendar blockRadius={19}/>

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.