solid-js-timers

solid-js-timers

Timer hooks for solid-js.

Quick start

Installation

npm i solid-js-timers
# or
yarn add solid-js-timers
# or
pnpm add solid-js-timers

Demo here!

Examples

useStopwatch

import { useStopwatch } from 'solid-js-timers';

const App = () => {
  const stopwatch = useStopwatch();
  stopwatch.setMilliseconds(() => 69_000);

  return (
    <div>
      <div>
        <button type="button" onClick={() => stopwatch.start()}>
          start
        </button>
        <button type="button" onClick={() => stopwatch.stop()}>
          stop
        </button>
        <button type="button" onClick={() => stopwatch.reset()}>
          reset
        </button>
      </div>
      <div>
        <span>
          {`${stopwatch.minutes}`.padStart(2, '0')}:
          {`${stopwatch.seconds}`.padStart(2, '0')}:
          {`${stopwatch.milliseconds}`.padStart(2, '0').slice(-2)}
        </span>
      </div>
    </div>
  );
};

Options

Option	Description
milliseconds	Current number of milliseconds.
seconds	Current amount of seconds.
minutes	Current amount of minutes.
isRunning	Indicates whether the timer is running or not.
setMilliseconds	Sets the number of milliseconds.
start	Start timer.
stop	Stop timer.
reset	Reset timer.
on	Listener method that fires on the specified timer event. Available events: start, stop, reset, update.

NOTE

useStopwatch resets after reaching 3600000 milliseconds (60 minutes or 1 hour).

useTime

import { useTime } from 'solid-js-timers';

const App = () => {
  const time = useTime();
  time.start();
  const enUS_DateTimeFormat = Intl.DateTimeFormat('en-US', {
    second: 'numeric',
    minute: 'numeric',
    hour: 'numeric',
    hour12: false,
  });

  return (
    <div>
      <div>
        <button type="button" onClick={() => time.start()}>
          start
        </button>
        <button type="button" onClick={() => time.stop()}>
          stop
        </button>
      </div>
      <div>
        <span>
          {enUS_DateTimeFormat.format(time.currentDate)}
        </span>
        <span>
          {time.ampm}
        </span>
      </div>
    </div>
  );
};

Options

Option	Description
currentDate	Current date object.
ampm	'AM' or 'PM' depends on time.
isRunning	Indicates whether the timer is running or not.
start	Start timer.
stop	Stop timer.
on	Listener method that fires on the specified timer event. Available events: start, stop, update.

useTimer

import { useTimer } from 'solid-js-timers';

const App = () => {
  const timer = useTimer();
  timer.setMilliseconds(() => 69_000);

  return (
    <div>
      <div>
        <button type="button" onClick={() => timer.start()}>
          start
        </button>
        <button type="button" onClick={() => timer.stop()}>
          stop
        </button>
        <button type="button" onClick={() => timer.reset()}>
          reset
        </button>
      </div>
      <div>
        <span>
          {`${stopwatch.days}`.padStart(2, '0')}:
          {`${stopwatch.hours}`.padStart(2, '0')}:
          {`${stopwatch.minutes}`.padStart(2, '0')}:
          {`${stopwatch.seconds}`.padStart(2, '0')}:
          {`${stopwatch.milliseconds}`.padStart(2, '0').slice(-2)}
        </span>
      </div>
    </div>
  );
};

Options

Option	Description
milliseconds	Current number of milliseconds left.
seconds	Current amount of seconds left.
minutes	Current amount of minutes left.
hours	Current amount of hours left.
days	Current amount of days left.
isRunning	Indicates whether the timer is running or not.
setMilliseconds	Sets the number of milliseconds.
start	Start timer.
stop	Stop timer.
reset	Reset timer.
on	Listener method that fires on the specified timer event. Available events: start, end, stop, reset, update.

NOTE

useStopwatch, useTime, useTimer have the following arguments.

Name	Description	Default value
autoClearInterval	Clear timer's interval on cleanup method.	true
autoClearTimer	Clear timer on cleanup method.	true
autoClearListeners	Clear timer's listeners on cleanup method.	true
autoClearListersArgs	Clear arguments of timer's listeners on cleanup method.	true
autoClearStore	Clear timer store on cleanup method.	true