Clock Utils for Lightning Web Components

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.