npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jnguero-utils/timer-component

v1.0.2

Published

"TimerComponent is a customizable web component package that provides a countdown timer with play, pause, and reset functionalities. This package includes four main web components: TimerComponent, TimerPlayerComponent, TimerPartComponent, and the newly ad

Downloads

11

Readme

TimerComponent Documentation

Overview

TimerComponent is a customizable web component package that provides a countdown timer with play, pause, and reset functionalities. This package includes four main web components: TimerComponent, TimerPlayerComponent, TimerPartComponent, and the newly added SetTimerComponent.

Installation

Install the package via NPM:

npm install @jnguero-utils/timer-component

Usage

Importing Components

To use the components in your project, import them as follows as create customElements with them:

    import { TimerComponent } from "@jnguero-utils/timer-component";
    import { TimerPlayerComponent } from "@jnguero-utils/timer-component";
    import { SetTimerComponent } from "@jnguero-utils/timer-component";

    window.customElements.define("timer-component", TimerComponent);
    window.customElements.define("timer-player-component", TimerPlayerComponent);
    window.customElements.define("set-timer-component", SetTimerComponent);

TimerComponent

TimerComponent is the core component that handles the countdown timer functionality.

Properties

  • start (Number): Initial countdown value in seconds. Default is 0.
  • limit (Number): Countdown limit value in seconds. Required when reverse is false.
  • reverse (Boolean): If true, the timer counts down. Default is false.
  • autostart (Boolean): If true, the timer starts automatically. Default is false.
  • autoreset (Boolean): If true, the timer resets automatically when finished. Default is false.

Example

<timer-component
  start="3600"
  limit="7200"
  reverse
  autostart
  autoreset
></timer-component>

TimerPlayerComponent

TimerPlayerComponent provides controls to play, pause, and reset the TimerComponent.

Properties

  • playBtn (Boolean): Displays the play button. Default is false.
  • pauseBtn (Boolean): Displays the pause button. Default is false.
  • resetBtn (Boolean): Displays the reset button. Default is false.
  • isFinishedMessage (String): Message displayed when the timer finishes. Default is "¡Finish!".

Example

<timer-player-component
  play-btn
  pause-btn
  reset-btn
  finish-message="Time's Up!"
>
  <timer-component start="3600" limit="7200" reverse></timer-component>
</timer-player-component>

TimerPartComponent

TimerPartComponent displays individual parts of the timer (days, hours, minutes, seconds).

Properties

  • value (Number): The numeric value of the time part.
  • format (String): The format of the time part (DD, HH, MM, SS).

Example

<timer-part-component value="12" format="HH"></timer-part-component>

SetTimerComponent

SetTimerComponent provides an input for updating the TimerComponent dynamically.

Properties

  • inputValue (Number): The input value in seconds. Default is 0.

Events

  • submit-timer: Dispatched when the timer value is submitted. Includes the new timer value in the detail.

Example

    <set-timer-component></set-timer-component>
    <timer-component id="timer"></timer-component>

    <script>
        const setTimerComponent = document.querySelector('set-timer-component');
        const timerComponent = document.getElementById('timer');

        setTimerComponent.addEventListener('submit-timer', (event) => {
            timerComponent.start = event.detail.value;
        });
    </script>

Styling

Each component can be customized using CSS variables for better integration with your design system.

TimerComponent Styles

  • --timer-component-part-color: Color of the timer parts.
  • --timer-component-join-padding: Padding between the timer parts.
  • --timer-component-join-font-size: Font size between the timer parts.

TimerPlayerComponent Styles

  • --timer-player-component-action-margin: Margin for action buttons.
  • --timer-player-component-status-margin: Margin for the status display.
  • --timer-player-component-status-color: Color for the status display.
  • --timer-player-component-status-font-size: Font size for the status display.
  • --timer-player-component-button-padding: Padding for action buttons.
  • --timer-player-component-button-margin: Margin for action buttons.
  • --timer-player-component-button-border-radius: Border radius for action buttons.
  • --timer-player-component-button-border: Border style for action buttons.
  • --timer-player-component-button-font-size: Font size style for action buttons.
  • --timer-player-component-font-weight: Font weight for action buttons.
  • --timer-player-component-color: Text color for action buttons.
  • --timer-player-component-part-color: Background color for action buttons.
  • --timer-player-component-play-color: Text color for the play button.
  • --timer-player-component-play-background-color: Background color for the play button.

TimerPartComponent Styles

  • --timer-component-part-color: Text color for timer parts.
  • --timer-component-part-padding: Padding for timer parts.
  • --timer-component-part-height: Height for timer parts.
  • --timer-component-part-witdh: Width for timer parts.
  • --timer-component-part-box-shadow: Box shadow for timer parts.
  • --timer-component-part-border-radius: Border radius for timer parts.
  • --timer-component-part-font-size: Font size for timer parts.

Events

  • isFinished: Dispatched by TimerComponent when the timer finishes.

Example Project

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Timer Component Example</title>
    <script type="module">
      import {
        TimerComponent,
        TimerPlayerComponent,
        TimerPartComponent,
      } from "timer-component";
    </script>
    <style>
      timer-component,
      timer-player-component,
      timer-part-component {
        --timer-component-part-color: #000;
        --timer-player-component-action-margin: 10px;
        --timer-player-component-status-color: #f00;
      }
    </style>
  </head>
  <body>
    <timer-player-component
      play-btn
      pause-btn
      reset-btn
      finish-message="Time's Up!"
    >
      <timer-component start="3600" limit="7200" reverse></timer-component>
    </timer-player-component>
  </body>
</html>

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.