@kumdotdev/countdown-timer v1.2.0

Countdown Timer Web Component

Vanilla JS one-file Web Component dependency free and framework agnostic. No build required. Use it as is.

Demo

Visit the demo page for usage examples.

Install

npm i @kumdotdev/countdown-timer

React/Next.js

'use client';
import { useEffect } from 'react';

export const MyComponent = () => {
  useEffect(() => {
    import('@kumdotdev/countdown-timer/countdown-timer.js');
    return () => {};
  }, []);
};

return (
  <>
    <countdown-timer
      date='2028-01-01T23:42:00.000+01:00'
      alarm='86400'
    ></countdown-timer>
  </>
);

Import

CDN

<script async type="module" src="https://unpkg.com/@kumdotdev/countdown-timer/countdown-timer.js"></script>

Local install

<script async type="module" src="/node_modules/@kumdotdev/countdown-timer/countdown-timer.js"></script>

Import as module

<script type="module">
  import '/node_modules/@kumdotdev/countdown-timer/countdown-timer.js';
  // ...
</script>

Usage

Use ISO 8601 date format to provide the desired enddate!

The shorter version 2024-01-01T23:42 should work also.

<countdown-timer
  date="2024-01-01T23:42:00.000+01:00">
</countdown-timer>

Language support

English, French and German provided. You can add more languages to L10N constant. Defaults to english language.

Attributes

Styling

Defaults

:root {
  --cdt-digit-font-size: 2rem;
  --cdt-digit-font-family: inherit;
  --cdt-digit-font-weight: 700;
  --cdt-digit-text-color: #fefefe;
  --cdt-digit-box-color: #111;
  --cdt-digit-box-min-width: fit-content;
  --cdt-label-font-size: 0.75rem;
}