React Circle Timer
React Js countdown timer component in a circle shape with color and progress animation.
Install
npm i react-circle-timer
or
yarn add react-circle-timer
Usage
Example
import { useRef } from "react";
import ReactCircleTimer from 'react-circle-timer';
function Example() {
const countDownRef = useRef();
const start = () => {
countDownRef.current.startTimer();
};
const stop = () => {
countDownRef.current.stopTimer();
};
const resume = () => {
countDownRef.current.resumeTimer();
};
const reset = () => {
countDownRef.current.resetTimer();
};
return (
<div>
<button onClick={start}>Start</button>
<button onClick={stop}>stop</button>
<button onClick={resume}>resume</button>
<button onClick={reset}>reset</button>
<ReactCircleTimer
ref={countDownRef}
size={150}
strokeBgColor="#4d4d4d"
strokeWidth={10}
strokeColor="red"
seconds={30}
prefixTime={"s"}
/>
</div>
);
}
export default Example;
Props
Prop Name | Type | Default | Description |
---|---|---|---|
ref | string | required | component reference |
size | number | 80 | Width and height of the SVG element |
colorsTime | object | - | time color |
autoPlay | boolean | false | auto play animation |
strokeWidth | number | 10 | Path stroke width |
strokeBgColor | string | #ccc | fixed background |
strokeColor | string | red | stroke color |
seconds | number | 30 | Time time to run out of circle |
prefixTime | string | - | prefix after time |
start | () => void | - | start countdown |
stop | () => void | - | stop countdown |
resume | () => void | - | resume countdown |
reset | () => void | - | reset countdown |