🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-circle-timer

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-circle-timer

Lightweight React countdown timer circle component with color and progress animation based on SVG

1.0.1
latest
Source
npm
Version published
Maintainers
1
Created
Source

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 NameTypeDefaultDescription
refstringrequiredcomponent reference
sizenumber80Width and height of the SVG element
colorsTimeobject-time color
autoPlaybooleanfalseauto play animation
strokeWidthnumber10Path stroke width
strokeBgColorstring#cccfixed background
strokeColorstringredstroke color
secondsnumber30Time time to run out of circle
prefixTimestring-prefix after time
start() => void-start countdown
stop() => void-stop countdown
resume() => void-resume countdown
reset() => void-reset countdown

Keywords

react

FAQs

Package last updated on 19 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts