Solid-js-timers NPM

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`

solid solid js solid-js solid-js-timers timer timers time

@everything-registry/sub-chunk-2795

1.0.2

8 months ago

1.0.1

8 months ago

1.0.0

8 months ago