react-circle-timer

1.0.1 • Public • Published

React Circle Timer

React Js countdown timer component in a circle shape with color and progress animation.

Capture

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

Package Sidebar

Install

npm i react-circle-timer

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

23.7 kB

Total Files

9

Last publish

Collaborators

  • anhln_redflag