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

react-countdown-circle-timer

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-countdown-circle-timer

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

2.0.3
Source
npm
Version published
Weekly downloads
37K
-10.67%
Maintainers
1
Weekly downloads
 
Created
Source

React Countdown Circle Timer

npm npm GitHub Workflow Status Codecov npm bundle size

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

  • Performance optimized with single requestAnimationFrame loop to animate color and progress (no setInterval used)
  • Transition between colors during the countdown
  • Support for linear gradient
  • Fully customizable content in the center of the circle
  • a11y support
  • Built-in and ready-to-use TypeScript type definitions.

Installation

yarn add react-countdown-circle-timer

Migrating from v1.x.x to v2.x.x?

There are a few small API changes to consider before switching to v2.x.x. Read Migrate to v2.x.x docs for more info.

Demo

Check the demo on CodeSandbox to get started
Edit stoic-cache-e7cie

Basic usage

import { CountdownCircleTimer } from 'react-countdown-circle-timer'

const UrgeWithPleasureComponent = () => (
  <CountdownCircleTimer
    isPlaying
    duration={10}
    colors={[['#004777', 0.33], ['#F7B801', 0.33], ['#A30000']]}
  >
    {({ remainingTime }) => remainingTime}
  </CountdownCircleTimer>
)

Props

Refer to the list of props

Recipes

Restart timer at any given time

Pass a key prop to CountdownCircleTimer and change the key when the timer should be restarted.

Repeat timer when countdown is completed

Return an array from onComplete handler, which indicates if the animation should be repeated. Example:

const UrgeWithPleasureComponent = () => (
  <CountdownCircleTimer
    onComplete={() => {
      // do your stuff here
      return [true, 1500] // repeat animation in 1.5 seconds
    }}
    isPlaying
    duration={10}
    colors={[['#A30000']]}
  />
)

Set the initial remaining time different then the duration provided

Pass the remaining time to initialRemainingTime prop. Example:

const UrgeWithPleasureComponent = () => (
  <CountdownCircleTimer
    isPlaying
    duration={60}
    initialRemainingTime={15}
    colors={[['#A30000']]}
  />
)

In the example above, the countdown will start at 15 seconds (one quarter before it's done) and it will animate for 15 seconds until reaches 0.

Slide down time animation

Here is an example on how you can achieve the animation below:

const renderTime = (time) => {
  const currentTime = useRef(time)
  const prevTime = useRef(null)
  const isNewTimeFirstTick = useRef(false)
  const [_, setOneLastRerender] = useState(0)

  if (currentTime.current !== time) {
    isNewTimeFirstTick.current = true
    prevTime.current = currentTime.current
    currentTime.current = time
  } else {
    isNewTimeFirstTick.current = false
  }

  // force one last re-render when the time is over to tirgger the last animation
  if (time === 0) {
    setTimeout(() => {
      setOneLastRerender((val) => val + 1)
    }, 20)
  }

  const isTimeUp = isNewTimeFirstTick.current

  return (
    <div className="time-wrapper">
      <div key={time} className={`time ${isTimeUp ? 'up' : ''}`}>
        {time}
      </div>
      {prevTime.current !== null && (
        <div
          key={prevTime.current}
          className={`time ${!isTimeUp ? 'down' : ''}`}
        >
          {prevTime.current}
        </div>
      )}
    </div>
  )
}
.time-wrapper {
  position: relative;
  // change width and height if needed
  width: 80px;
  height: 60px;
}

.time-wrapper .time {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(0);
  opacity: 1;
  transition: all 0.2s;
}

.time-wrapper .time.up {
  opacity: 0;
  transform: translateY(-100%);
}

.time-wrapper .time.down {
  opacity: 0;
  transform: translateY(100%);
}

Feed the renderTime function above to the CountdownCircleTimer children prop and add the styles above to your stylesheet.

Keywords

react

FAQs

Package last updated on 23 Apr 2020

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