feat: Added use-timeout.

Author: Blankeos

dev/components/examples/use-timeout/use-timeout.code.mdx

@@ -0,0 +1,40 @@
+```tsx
+import { useTimeout } from 'bagon-hooks';
+
+import { createSignal } from 'solid-js';
+
+export function UseTimeoutExample() {
+  const [awesomeState, setAwesomeState] = createSignal('not awesome');
+  const { start, clear } = useTimeout(() => {
+    setAwesomeState('awesome');
+  }, 1000);
+
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-x-3 gap-y-3 rounded-md border p-3 py-10 text-center">
+      <p class="text-xl font-medium">You: {awesomeState()}</p>
+      <p class="max-w-xs text-sm">
+        You will become <b>Awesome</b> in 1 second after pressing 'Start'. You can also cancel.
+      </p>
+      <div class="flex gap-4">
+        <button
+          class={`w-20 rounded-md bg-primary px-3 py-1.5 text-white transition active:scale-95`}
+          onClick={() => {
+            start(1000);
+          }}
+        >
+          Start
+        </button>
+        <button
+          class="w-20 rounded-md bg-gray-400 px-3 py-1.5 text-white transition active:scale-95"
+          onClick={() => {
+            clear();
+            setAwesomeState('not awesome');
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+```

dev/components/examples/use-timeout/use-timeout.example.tsx

@@ -0,0 +1,50 @@
+import { useTimeout } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-timeout.code.mdx';
+
+import { createSignal } from 'solid-js';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseTimeoutExample() {
+  const [awesomeState, setAwesomeState] = createSignal('not awesome');
+  const { start, clear } = useTimeout(() => {
+    setAwesomeState('awesome');
+  }, 1000);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useTimeout"
+      description="Calls function in given timeout"
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-x-3 gap-y-3 rounded-md border p-3 py-10 text-center">
+        <p class="text-xl font-medium">You: {awesomeState()}</p>
+        <p class="max-w-xs text-sm">
+          You will become <b>Awesome</b> in 1 second after pressing 'Start'. You can also cancel.
+        </p>
+        <div class="flex gap-4">
+          <button
+            class={`w-20 rounded-md bg-primary px-3 py-1.5 text-white transition active:scale-95`}
+            onClick={() => {
+              start(1000);
+            }}
+          >
+            Start
+          </button>
+          <button
+            class="w-20 rounded-md bg-gray-400 px-3 py-1.5 text-white transition active:scale-95"
+            onClick={() => {
+              clear();
+              setAwesomeState('not awesome');
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

src/use-timeout/use-timeout.ts

@@ -0,0 +1,37 @@
+import { createEffect, onCleanup } from 'solid-js';
+
+export function useTimeout(
+  callback: (...callbackParams: any[]) => void,
+  delay: number,
+  options: { autoInvoke: boolean } = { autoInvoke: false },
+) {
+  let timeoutRef: number | null = null;
+
+  const start = (...callbackParams: any[]) => {
+    if (!timeoutRef) {
+      timeoutRef = window.setTimeout(() => {
+        callback(callbackParams);
+        timeoutRef = null;
+      }, delay);
+    }
+  };
+
+  const clear = () => {
+    if (timeoutRef) {
+      window.clearTimeout(timeoutRef);
+      timeoutRef = null;
+    }
+  };
+
+  createEffect(() => {
+    if (options.autoInvoke) {
+      start();
+    }
+
+    onCleanup(() => {
+      clear();
+    });
+  });
+
+  return { start, clear };
+}