react-circular-progress-bar

intro

오늘은 원형 프로그래스 바 라이브러리를 가지고 왔습니다.
생각보다 마음에 드는 원형 프로그래스 바 찾기가 너무 힘들었어요.. 1시간~2시간정도 찾아볼 정도로...
 
제가 사용한 라이브러리는 react-circular-progress-bar입니다.
깃헙: https://github.com/tomickigrzegorz/react-circular-progress-bar
예시: https://tomickigrzegorz.github.io/react-circular-progress-bar/?path=/story/circular-progress-bar--minimal

---

install

npm install @tomickigrzegorz/react-circular-progress-bar

---

code

import { CircularProgressBar } from "@tomickigrzegorz/react-circular-progress-bar";

function 컴포넌트() {
  return (
    <>
    ...
          <CircularProgressBar
            colorCircle="#ededed"
            colorSlice="#e54e21"
            percent={80}
            fontColor="#e54e21"
            round={true}
            fontSize="15px"
            textPosition="1.5rem"
          >
            <div className={style.langHTML}>HTML</div>
          </CircularProgressBar>
   ... 
    </>
  );

이런식으로 사용할 수 있습니다.
props는 깃허브에서 확인한 후 필요한 것만 설정해주면 됩니다. 겹치는 건 객체로 만들어서 사용하면 더 깔끔해지겠죠?

---

결과

아래와 같이 사용하였습니다. 스타일은 조금 더 수정을 해야할 것 같아요.