custom-countdown v1.3.0

react-countdown360

A simple and customizable React circular countdown that counts down a number of seconds. This is a React implementation of John Schult's original jquery.countdown360

Examples

You can find some examples in the examples directory.

Quickstart

Install with npm:

npm install react-countdown360

Render your countdown:

import Countdown360 from 'react-countdown360'

const App = () => {
  return <Countdown360 seconds={10} />
}

Documentation

Props

Time Formatters

You can customize the way the value on the countdown is shown by providing a custom timeFormatter function.

By default, the value shown is the number of seconds remaining rounded to the nearest integer.

A time formatter is a function that takes one single argument, being the number of milliseconds left, and returns the value to show on the countdown.

For instance, the following function is a time formatter that always shows a value with at least two digits:

const timeFormatterTwoDigits = timeLeft => {
  return Math.round(timeLeft / 1000).toString().padStart(2, '0')
}

We already provide a few time formatters that you can import from the package.

Unit Formatters

You can also customize the unit shown on the countdown by providing a custom unitFormatter function.

A unit formatter is a function that takes one single argument, being the value shown on the countdown (as returned by the given time formatter), and returns the unit to display.

For instance, the following function is a unit formatter to show the number of seconds in Spanish:

const unitFormatterSpanishSeconds = value => {
  return value.toString() === '1' ? 'segundo' : 'segundos'
}

Be careful when choosing your unit formatter that it matches the time formatter in use!

We already provide a few unit formatters that you can import from the package.

Methods

• start: start or resume the countdown
• stop: pause the countdown
• addSeconds (Number): add or remove (if negative) the given number of seconds to remaining number of seconds
• extendTimer (Number): add or remove (if negative) the given number of seconds to the total number of seconds