Countdownbar NPM

countdownbar

A countdown bar library for web app.

Release Notes.

Features

Support for custom templates and styles.
Support typescript.

Installation

# pnpm
$ pnpm add countdownbar

# yarn
$ yarn add countdownbar

# npm
$ npm i countdownbar

Usage

Define a container.

<div id="countdown-bar-container"></div>

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`