Countdown Component for Svelte 3
npm install svelte-countdownsh
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
$3
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.
`js
import Countdown from 'svelte-countdown/src/index.js'
`
2. Call the component where you want it to be placed e.g.:
`html
{#if remaining.done === false}
{remaining.years} years
{remaining.months} months
{remaining.weeks} weeks
{remaining.days} days
{remaining.hours} hours
{remaining.minutes} minutes
{remaining.seconds} seconds
{:else}
The time has come!
{/if}
`
In the slot space between 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}
``