Skip to content

Commit c46bbc1

Browse files
committed
New hooks
1 parent aec9263 commit c46bbc1

File tree

4 files changed

+85
-7
lines changed

4 files changed

+85
-7
lines changed

packages/solidjs-hooks/README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,44 @@ const Demo = () => {
5252

5353

5454

55+
### `useInterval`
56+
57+
A declarative interval hook. The interval can be paused by setting the delay to `null`.
58+
59+
#### Usage
60+
61+
```jsx
62+
import { createSignal } from 'solid-js';
63+
import { useInterval } from 'solidjs-hooks';
64+
65+
const Demo = () => {
66+
const DEFAULT_DELAY = 1000;
67+
const [count, setCount] = createSignal(0);
68+
const [delay, setDelay] = createSignal(DEFAULT_DELAY);
69+
70+
useInterval(() => {
71+
setCount((prevCount) => prevCount + 1);
72+
}, delay);
73+
74+
const toggleInterval = () => {
75+
setDelay((prevDelay) => prevDelay ? null : DEFAULT_DELAY)
76+
}
77+
78+
return (
79+
<div>
80+
<p>Count: {count()}</p>
81+
<div>
82+
<button onClick={() => toggleInterval()}>
83+
Toggle Interval
84+
</button>
85+
</div>
86+
</div>
87+
)
88+
}
89+
```
90+
91+
92+
5593
### `useNumber`
5694

5795
SolidJS state hook that tracks a numeric value.
@@ -60,6 +98,40 @@ This is an alias of [`useCounter`](#usecounter).
6098

6199

62100

101+
### `useTimeout`
102+
103+
A declarative timeout hook. When the `delay` changes, it will rerun.
104+
105+
#### Usage
106+
107+
```jsx
108+
import { createSignal } from 'solid-js';
109+
import { useTimeout } from 'solidjs-hooks';
110+
111+
const Demo = () => {
112+
const [count, setCount] = createSignal(0);
113+
const [delay, setDelay] = createSignal(1000);
114+
115+
useTimeout(() => {
116+
setCount((prevCount) => prevCount + 1);
117+
}, delay)
118+
119+
return (
120+
<div>
121+
<p>Count is {count()}</p>
122+
<button onClick={() => setDelay((prevDelay) => prevDelay + 1000)}>
123+
Increase timeout delay
124+
</button>
125+
<button onClick={() => setDelay((prevDelay) => prevDelay - 1000)}>
126+
Decrease timeout delay
127+
</button>
128+
</div>
129+
)
130+
}
131+
```
132+
133+
134+
63135
### `useToggle`
64136

65137
SolidJS state hook that tracks the value of a boolean.

packages/solidjs-hooks/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "solidjs-hooks",
33
"description": "A collection of useful SolidJS hooks.",
44
"private": false,
5-
"version": "0.0.4",
5+
"version": "0.0.5",
66
"license": "MIT",
77
"scripts": {
88
"build": "pridepack clean && pridepack build"

packages/solidjs-hooks/src/useInterval.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import type { Accessor } from 'solid-js';
22
import { createEffect, onCleanup } from 'solid-js';
33

4-
function useInterval(callback: () => void, interval: Accessor<number>) {
4+
function useInterval(callback: () => void, delay?: Accessor<number> | null) {
55
createEffect(() => {
6-
if (typeof interval() !== 'number' || interval() < 0) return;
6+
if (
7+
delay === null ||
8+
delay === undefined ||
9+
typeof delay() !== 'number' ||
10+
delay() < 0
11+
)
12+
return;
713

8-
const intervalInstance = setInterval(callback, interval());
14+
const interval = setInterval(callback, delay());
915

1016
onCleanup(() => {
11-
clearInterval(intervalInstance);
17+
clearInterval(interval);
1218
});
1319
});
1420
}

packages/solidjs-hooks/src/useTimeout.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ function useTimeout(callback: () => void, delay: Accessor<number>) {
55
createEffect(() => {
66
if (typeof delay() !== 'number' || delay() < 0) return;
77

8-
const timerInstance = setTimeout(callback, delay());
8+
const timeout = setTimeout(callback, delay());
99

1010
onCleanup(() => {
11-
clearTimeout(timerInstance);
11+
clearTimeout(timeout);
1212
});
1313
});
1414
}

0 commit comments

Comments
 (0)