npm 사이트: https://www.npmjs.com/package/react-countdown-circle-timer
react-countdown-circle-timer
Lightweight React countdown timer component with color and progress animation based on SVG. Latest version: 3.0.9, last published: 3 months ago. Start using react-countdown-circle-timer in your project by running `npm i react-countdown-circle-timer`. There
www.npmjs.com
설치방법
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으로 남은시간을 넘겨준다
이외의 자세한 내용은 공식문서를 참고 바란다.
'구 게시글 > 라이브러리 소개' 카테고리의 다른 글
React로 라이브러리 만들어보기 (0) | 2022.12.08 |
---|