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 |