New hooks

Author: NukeJS

packages/solidjs-hooks/README.md

@@ -52,6 +52,44 @@ const Demo = () => {
 
 
 
+### `useInterval`
+
+A declarative interval hook. The interval can be paused by setting the delay to `null`.
+
+#### Usage
+
+```jsx
+import { createSignal } from 'solid-js';
+import { useInterval } from 'solidjs-hooks';
+
+const Demo = () => {
+  const DEFAULT_DELAY = 1000;
+  const [count, setCount] = createSignal(0);
+  const [delay, setDelay] = createSignal(DEFAULT_DELAY);
+
+  useInterval(() => {
+    setCount((prevCount) => prevCount + 1);
+  }, delay);
+
+  const toggleInterval = () => {
+    setDelay((prevDelay) => prevDelay ? null : DEFAULT_DELAY)
+  }
+
+  return (
+    <div>
+      <p>Count: {count()}</p>
+      <div>
+        <button onClick={() => toggleInterval()}>
+          Toggle Interval
+        </button>
+      </div>
+    </div>
+  )
+}
+```
+
+
+
 ### `useNumber`
 
 SolidJS state hook that tracks a numeric value.
@@ -60,6 +98,40 @@ This is an alias of [`useCounter`](#usecounter).
 
 
 
+### `useTimeout`
+
+A declarative timeout hook. When the `delay` changes, it will rerun.
+
+#### Usage
+
+```jsx
+import { createSignal } from 'solid-js';
+import { useTimeout } from 'solidjs-hooks';
+
+const Demo = () => {
+  const [count, setCount] = createSignal(0);
+  const [delay, setDelay] = createSignal(1000);
+
+  useTimeout(() => {
+    setCount((prevCount) => prevCount + 1);
+  }, delay)
+
+  return (
+    <div>
+      <p>Count is {count()}</p>
+      <button onClick={() => setDelay((prevDelay) => prevDelay + 1000)}>
+        Increase timeout delay
+      </button>
+      <button onClick={() => setDelay((prevDelay) => prevDelay - 1000)}>
+        Decrease timeout delay
+      </button>
+    </div>
+  )
+}
+```
+
+
+
 ### `useToggle`
 
 SolidJS state hook that tracks the value of a boolean.

packages/solidjs-hooks/package.json

@@ -2,7 +2,7 @@
   "name": "solidjs-hooks",
   "description": "A collection of useful SolidJS hooks.",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "MIT",
   "scripts": {
     "build": "pridepack clean && pridepack build"

packages/solidjs-hooks/src/useInterval.ts

@@ -1,14 +1,20 @@
 import type { Accessor } from 'solid-js';
 import { createEffect, onCleanup } from 'solid-js';
 
-function useInterval(callback: () => void, interval: Accessor<number>) {
+function useInterval(callback: () => void, delay?: Accessor<number> | null) {
   createEffect(() => {
-    if (typeof interval() !== 'number' || interval() < 0) return;
+    if (
+      delay === null ||
+      delay === undefined ||
+      typeof delay() !== 'number' ||
+      delay() < 0
+    )
+      return;
 
-    const intervalInstance = setInterval(callback, interval());
+    const interval = setInterval(callback, delay());
 
     onCleanup(() => {
-      clearInterval(intervalInstance);
+      clearInterval(interval);
     });
   });
 }

packages/solidjs-hooks/src/useTimeout.ts

@@ -5,10 +5,10 @@ function useTimeout(callback: () => void, delay: Accessor<number>) {
   createEffect(() => {
     if (typeof delay() !== 'number' || delay() < 0) return;
 
-    const timerInstance = setTimeout(callback, delay());
+    const timeout = setTimeout(callback, delay());
 
     onCleanup(() => {
-      clearTimeout(timerInstance);
+      clearTimeout(timeout);
     });
   });
 }