countdownbar
TypeScript icon, indicating that this package has built-in type declarations

1.6.0 • Public • Published


countdownbar

A countdown bar library for web app.

Features

  • Support for custom templates and styles.
  • Support typescript.

Installation

# pnpm
$ pnpm add countdownbar

# yarn
$ yarn add countdownbar

# npm
$ npm i countdownbar

Usage

  1. Define a container.
<div id="countdown-bar-container"></div>
  1. Creates a countdown bar instance.
import { createCountdownBar } from 'countdownbar'

const countdownBarInstance = createCountdownBar({
  container: '#countdown-bar-container',
  time: 24 * 60 * 60 * 1000,
  onFinish() {
    // do something when finished.
  }
})

Options

Prop Type Default Value Description
container string, HTMLElement - Define a container for countdown bar.
time number 0 Total time, unit milliseconds
autoStart boolean true Whether to auto start count down
millisecond boolean false Whether to enable millisecond render
color string #323233 Define color of countdown.
fontSize string 14px Define font-size of countdown.
template Function - Custom the template of countdown bar. (current: CurrentTime) => string
onChange Function - Emitted when count down changed. (current: CurrentTime) => void
onFinish Function - Emitted when count down finished. () => void

CurrentTime Structure

Name Description Type
total Total time, unit milliseconds number
days Remain days number
hours Remain hours number
minutes Remain minutes number
seconds Remain seconds number
milliseconds Remain milliseconds number

APIs

Methods of instance

start

Start count down.

countdownBarInstance.start()

pause

Pause count down.

countdownBarInstance.pause()

reset

Reset count down. Accept a new time as first param, defaults is options.time.

countdownBarInstance.reset()

Package Sidebar

Install

npm i countdownbar

Weekly Downloads

5

Version

1.6.0

License

MIT

Unpacked Size

15.1 kB

Total Files

7

Last publish

Collaborators

  • elenh