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
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}
/>
</>
)
}
...