React Circle Countdown

React Circle Countdown is a customizable animated countdown component.

Installation

npm i @abucarub/react-circle-countdown

Usage

import CircleCountdown from '@abucarub/react-circle-countdown';

const YourComponent = () => (
      <CircleCountdown
        seconds={10}
        size={150}
        font="bold 20px Arial"
        fontColor="#D7ECE6"
        barColor="rgb(51, 255, 153, 0.5)"
        barWidth={15}
        barTrailColor="#64867B"
        barEndShape="round"
        isPaused={false}
        pausedText="Wait"
        endText="Finished"
        onComplete={() => {
          console.log('Do something');
        }}
      />
)

Props

Name	Type	Default	Description
seconds	Number	required	The seconds to count down ( min value: 1)
size	number	130	The width and height of the component
font	string	"20px sans-serif"	Just like the CSS 'font' property
fontColor	string	'#fff'	Takes any valid color format (HEX, rgb, rgba)
barColor	string	'#8ac4e1'	Takes any valid color format (HEX, rgb, rgba)
barTrailColor	string	'#6e818b'	Takes any valid color format (HEX, rgb, rgba)
barWidth	number	15	Path bar width
barEndShape	round | butt	butt	The shape of bar end
isPaused	boolean	true	Pause and play animation
pausedText	string	Current time	The displayed text when the animation is paused
endText	string	"Time over"	The displayed when the countdown is over
showMask	boolean	true	If set false, it show just a countdown without any mask
onComplete	function		Called when the countdown is over

Recipes

To restart de countdown

Could be restarted at any time, by using a useRef hook.

import React, { useRef } from 'react';
import CountDown, { IInputHandles } from "../components/CountDown";

const YourComponent = () => {
  const restartRef = useRef<IInputHandles>(null);

  const handleRestart = () => {
    restartRef.current?.restart();
  };

  return (
    <>
      <button onClick={() => handleRestart()}>
        Restart
      </button>
      <CircleCountDown
        ref={restartRef}
        seconds={80}      
      />
    </>
  )
}
...