feat: Added use-interval.

Author: Blankeos

README.md

@@ -83,7 +83,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [x] use-in-viewport
 - [x] use-input-state
 - [x] use-intersection (Added, but note that there is [`createIntersectionObserver`](https://primitives.solidjs.community/package/intersection-observer/) in the official solid-primitives as well)
-- [ ] use-interval
+- [x] use-interval
 - [x] ~~use-is-first-render~~ (Every component function in SolidJS runs only once! Every component is first render only 🙂)
 - [x] ~~use-isomorphic-effect~~ (Solid's [`createEffect`](https://docs.solidjs.com/reference/basic-reactivity/create-effect) is technically already isomorphic because it doesn't error on SSR. Also, it also only runs on client-side.)
 - [ ] use-list-state
@@ -116,7 +116,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [ ] use-throttled-callback
 - [ ] use-throttled-state
 - [ ] use-throttled-value
-- [ ] use-timeout
+- [x] use-timeout
 - [x] use-toggle
 - [ ] use-uncontrolled
 - [ ] use-validated-state

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

@@ -0,0 +1,31 @@
+```tsx
+import { useInterval } from 'bagon-hooks';
+
+import { createSignal } from 'solid-js';
+
+export function UseIntervalExample() {
+  const [seconds, setSeconds] = createSignal(0);
+
+  const interval = useInterval(
+    () => {
+      setSeconds(s => s + 1);
+    },
+    1000,
+    { autoInvoke: true },
+  );
+
+  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">Page loaded {seconds()} seconds ago.</p>
+      <button
+        class={`rounded-md ${
+          !interval.active() ? 'bg-primary' : 'bg-red-500'
+        } px-3 py-1.5 text-white transition active:scale-95`}
+        onClick={interval.toggle}
+      >
+        {interval.active() ? 'Stop' : 'Start'} counting
+      </button>
+    </div>
+  );
+}
+```

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

@@ -0,0 +1,41 @@
+import { useInterval } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-interval.code.mdx';
+
+import { createSignal } from 'solid-js';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseIntervalExample() {
+  const [seconds, setSeconds] = createSignal(0);
+
+  const interval = useInterval(
+    () => {
+      setSeconds(s => s + 1);
+    },
+    1000,
+    { autoInvoke: true },
+  );
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useInterval"
+      description="Calls function with a given interval"
+      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">Page loaded {seconds()} seconds ago.</p>
+        <button
+          class={`rounded-md ${
+            !interval.active() ? 'bg-primary' : 'bg-red-500'
+          } px-3 py-1.5 text-white transition active:scale-95`}
+          onClick={interval.toggle}
+        >
+          {interval.active() ? 'Stop' : 'Start'} counting
+        </button>
+      </div>
+    </ExampleBase>
+  );
+}

dev/constants/hooks-count.ts

@@ -1 +1 @@
-export const HOOKS_COUNT = 36;
+export const HOOKS_COUNT = 38;

dev/pages/index/+Page.tsx

@@ -25,6 +25,7 @@ import { UseIdleExample } from 'dev/components/examples/use-idle/use-idle.exampl
 import { UseInViewportExample } from 'dev/components/examples/use-in-viewport/use-in-viewport.example';
 import { UseInputStateExample } from 'dev/components/examples/use-input-state/use-input-state.example';
 import { UseIntersectionExample } from 'dev/components/examples/use-intersection/use-intersection.example';
+import { UseIntervalExample } from 'dev/components/examples/use-interval/use-interval.example';
 import { UseKeyboardExample } from 'dev/components/examples/use-keyboard/use-keyboard.example';
 import { UseLocalStorageStoreExample } from 'dev/components/examples/use-local-storage-store/use-local-storage-store.example';
 import { UseLocalStorageExample } from 'dev/components/examples/use-local-storage/use-local-storage.example';
@@ -36,6 +37,7 @@ import { UseNetworkExample } from 'dev/components/examples/use-network/use-netwo
 import { UseOrientationExample } from 'dev/components/examples/use-orientation/use-orientation.example';
 import { UseOsExample } from 'dev/components/examples/use-os/use-os.example';
 import { UseResizeObserverExample } from 'dev/components/examples/use-resize-observer/use-resize-observer.example';
+import { UseTimeoutExample } from 'dev/components/examples/use-timeout/use-timeout.example';
 import { UseToggleExample } from 'dev/components/examples/use-toggle/use-toggle.example';
 import { Kbd } from 'dev/components/kbd';
 import { HOOKS_COUNT } from 'dev/constants/hooks-count';
@@ -194,6 +196,14 @@ export default function HomePage() {
       title: 'useDisclosureData',
       example: <UseDisclosureDataExample />,
     },
+    {
+      title: 'useTimeout',
+      example: <UseTimeoutExample />,
+    },
+    {
+      title: 'useInterval',
+      example: <UseIntervalExample />,
+    },
   ];
 
   const filteredList = createMemo(() => {

src/index.ts

@@ -20,6 +20,7 @@ export * from './use-idle/use-idle';
 export * from './use-in-viewport/use-in-viewport';
 export * from './use-input-state/use-input-state';
 export * from './use-intersection/use-intersection';
+export * from './use-interval/use-interval';
 export * from './use-local-storage/use-local-storage';
 export * from './use-local-storage/use-local-storage-store';
 export * from './use-media-query/use-media-query';
@@ -30,6 +31,7 @@ export * from './use-network/use-network';
 export * from './use-orientation/use-orientation';
 export * from './use-os/use-os';
 export * from './use-resize-observer/use-resize-observer';
+export * from './use-timeout/use-timeout';
 export * from './use-toggle/use-toggle';
 
 export * from './utils/random-id';

src/use-interval/use-interval.ts

@@ -0,0 +1,48 @@
+import { createEffect, createSignal, onCleanup } from 'solid-js';
+
+interface UseIntervalOptions {
+  /** If set, the interval will start automatically when the component is mounted, `false` by default */
+  autoInvoke?: boolean;
+}
+
+export function useInterval(
+  fn: () => void,
+  interval: number,
+  { autoInvoke = false }: UseIntervalOptions = {},
+) {
+  const [active, setActive] = createSignal(false);
+  let intervalRef: number | null = null;
+
+  const start = () => {
+    if (!intervalRef) {
+      intervalRef = window.setInterval(() => {
+        fn();
+      }, interval);
+      setActive(true);
+    }
+  };
+
+  const stop = () => {
+    setActive(false);
+    if (intervalRef) {
+      window.clearInterval(intervalRef);
+      intervalRef = null;
+    }
+  };
+
+  const toggle = () => {
+    active() ? stop() : start();
+  };
+
+  createEffect(() => {
+    if (autoInvoke) {
+      start();
+    }
+
+    onCleanup(() => {
+      stop();
+    });
+  });
+
+  return { start, stop, toggle, active };
+}