react-countdown-circle-timer 소개

npm 사이트: https://www.npmjs.com/package/react-countdown-circle-timer

react-countdown-circle-timer

 

설치방법

npm

npm i react-countdown-circle-timer

yarn

yarn add react-countdown-circle-timer

 

 

째깍 째깍

 

카운트 다운을 할 수 있는 컴포넌트 라이브러리이다.

CountdownCircleTimer로 컴포넌트를 import해서 컴포넌트를 불러온다

import { CountdownCircleTimer } from 'react-countdown-circle-timer'

const UrgeWithPleasureComponent = () => (
  <CountdownCircleTimer
    isPlaying
    duration={7}
    colors={['#004777', '#F7B801', '#A30000', '#A30000']}
    colorsTime={[7, 5, 2, 0]}
  >
    {({ remainingTime }) => remainingTime}
  </CountdownCircleTimer>
)

 

duration: 몇초로 설정할지 선택

colors에 색깔 값을 넣어 colorsTime에 맞는 시간에 색을 바꾸어준다.

children으로 남은시간을 넘겨준다

 

이외의 자세한 내용은 공식문서를 참고 바란다.