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