Skip to content

funny-family/solid-js-timers

Repository files navigation

solid-js-timers

solid-js-timers

pnpm

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

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