Skip to content

adityanaag3/lwc-clock-utils

Repository files navigation

Clock Utils for Lightning Web Components

npm version

A collection of clock related Lightning Web Components Open Source (LWC OSS) components.

Installation and Usage

  • Run the command npm install lwc-clock-utils in your LWC OSS project's root folder.
  • Update the lwc.config.json file in your project to include a new object { "npm": "lwc-clock-utils" } in the modules array.
  • Use any of the components listed below.

Timer Component

A visually stunning countdown timer.

Usage

Use the tag <clock-timer></clock-timer>.

Attributes

Name Description
duration-in-seconds Required. The duration of the timer in seconds
start-on-load Optional. If specified, the timer starts immediately when the component loads.

Methods

Name Description
startTimer() Starts the timer. You dont need to call it if start-on-load attribute is set.
resetTimer() Resets the timer to restart from the duration-in-seconds specified

Events

The component emits a timeup event when the timer runs out.

Example

Check the component src/modules/my/app to see how the Timer Component is used.


Make it your own

Start simple by running yarn watch (or npm run watch, if you set up the project with npm). This will start the project with a local development server.

The source files are located in the src folder. All web components are within the src/modules folder. The folder hierarchy also represents the naming structure of the web components.