https://github.com/funny-family/solid-js-timers
Timer hooks for solid-js ⌚⏲️⏱️
https://github.com/funny-family/solid-js-timers
helpers hooks javascript solid-js solidjs timers typescript utils
Last synced: 8 months ago
JSON representation
Timer hooks for solid-js ⌚⏲️⏱️
- Host: GitHub
- URL: https://github.com/funny-family/solid-js-timers
- Owner: funny-family
- License: mit
- Created: 2023-07-01T16:38:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-22T04:53:56.000Z (over 1 year ago)
- Last Synced: 2025-02-07T07:36:40.196Z (8 months ago)
- Topics: helpers, hooks, javascript, solid-js, solidjs, timers, typescript, utils
- Language: TypeScript
- Homepage: https://funny-family.github.io/solid-js-timers/
- Size: 232 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-js-timers
[](https://pnpm.io/)
Timer hooks for solid-js.
## Quick start
### Installation
```bash
npm i solid-js-timers
# or
yarn add solid-js-timers
# or
pnpm add solid-js-timers
```
### [Demo here!](https://funny-family.github.io/solid-js-timers/)
### Examples
#### `useStopwatch`
```tsx
import { useStopwatch } from 'solid-js-timers';
const App = () => {
const stopwatch = useStopwatch();
stopwatch.setMilliseconds(() => 69_000);
return (
stopwatch.start()}>
start
stopwatch.stop()}>
stop
stopwatch.reset()}>
reset
{`${stopwatch.minutes}`.padStart(2, '0')}:
{`${stopwatch.seconds}`.padStart(2, '0')}:
{`${stopwatch.milliseconds}`.padStart(2, '0').slice(-2)}
);
};
```
#### 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`
```tsx
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 (
time.start()}>
start
time.stop()}>
stop
{enUS_DateTimeFormat.format(time.currentDate)}
{time.ampm}
);
};
```
#### 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`
```tsx
import { useTimer } from 'solid-js-timers';
const App = () => {
const timer = useTimer();
timer.setMilliseconds(() => 69_000);
return (
timer.start()}>
start
timer.stop()}>
stop
timer.reset()}>
reset
{`${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)}
);
};
```
#### 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` |
---