Skip to content

Latest commit

 

History

History
93 lines (66 loc) · 3.36 KB

README.md

File metadata and controls

93 lines (66 loc) · 3.36 KB
Raw

svelte-countdown

A simple css-agnostic countdown component for Svelte 3 with just 1 dependency!

Installation 🔧

First you need a Svelte 3 project. Its starter template lives at https://github.com/sveltejs/template.

Then install the component by running the following command in your project's directory:

npm install svelte-countdown

Features ❤

  • Only 1 dependency! dayjs
  • Support for timezones & DST
  • done key to simplify what to show once the countdown is finished

Why not momentjs ?

dayjs is a modern alternative to momentjs with compatible Api. The main difference is that dayjs is tree shakeable which leaves a really tiny footprint to your bundle (aka loads faster). If you're still using momentjs in your project I'd suggest you take a look at dayjs. In most cases if you just switch packages and import {dayjs as moment} you won't have to change any of your code.

How to use 🚀

  1. First import the component on your svelte page's script section.
import Countdown from 'svelte-countdown/src/index.js'
  1. Call the component where you want it to be placed e.g.:
<Countdown from="2020-11-09 09:30:00" dateFormat="YYYY-MM-DD H:m:s" zone="Europe/Athens" let:remaining>
    <div class="whatever">
        {#if remaining.done === false}
        <span>{remaining.years} years</span>
        <span>{remaining.months} months</span>
        <span>{remaining.weeks} weeks</span>
        <span>{remaining.days} days</span>
        <span>{remaining.hours} hours</span>
        <span>{remaining.minutes} minutes</span>
        <span>{remaining.seconds} seconds</span>
        {:else}
        <h2>The time has come!</h2>
        {/if}
    </div>
</Countdown>

In the slot space between <Countdown></Countdown> you can write your template however you like. Use the keys as per the example above.

I recommend not to change the "remaining" object name. If you need to you can do it like so:

let:remaining={yourvariable}

Configuration Options

Name Default Required Description
from none Yes Effect duration in milliseconds
dateFormat YYYY-MM-DD H:m:s No See https://day.js.org/docs/en/parse/string-format
zone none No Use canonical timezones from https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

The Cons ❌

  • No callback, I suppose the done key is enough. Will update upon request.
  • No milliseconds counting. Will update upon request.
  • Tests - It's pretty straight forward but feel free to contribute.
  • No Demo Page - Will do.

Contribution 🖇️

Feel free to fork. If you find a bug or got something great to add make a pull request!

Authors ✒️

  • ** John Rallis ** - * Initial Work * - rallisf1

You can also look at the list of all the contributors who have participated in this project.

License 📄

This project is free to use, edit & distribute under the MIT License.

Expressions of Gratitude 🎁

  • Tell others about this project 📢
  • Buy me a beer 🍺 or coffee ☕ | ₿ Crypto |💰 Cash
  • Publicly thanks 🤓

⌨️ with ❤️ by rallisf1 😊