feature: add useAnimationLoop hook

src/hooks/useAnimationLoop/useAnimationLoop.stories.mdx

@@ -0,0 +1,61 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="hooks/useAnimationLoop" />
+
+# useAnimationLoop
+
+useAnimationLoop hook is a wrapper around requestAnimationFrame method. This hook will execute a
+callback function every next frame.
+
+## Reference
+
+```ts
+function useAnimationLoop(callback: (delta: number) => void, enabled = false): void;
+```
+
+### Parameters
+
+- `callback` - function accepts `delta` parameter which represents time passed since last
+  invocation; - `callback` function will be called on every animation frame
+- `enabled` - boolean which is used to play and pause the requestAnimationFrame
+
+### Returns
+
+- `void`
+
+## Usage
+
+```tsx
+function DemoComponent(): ReactElement {
+  const [currentTimestamp, setCurrentTimestamp] = useState(Date.now);
+  const [state, toggle] = useToggle(true);
+  useAnimationLoop(() => {
+    setCurrentTimestamp(Date.now);
+  }, state);
+
+  return (
+    <div>
+      <div className="alert alert-primary">
+        <h4 className="alert-heading">Instructions!</h4>
+        <p className="mb-0">Click on the button to toggle the animation loop</p>
+      </div>
+      <div className="card border-dark" data-ref="test-area">
+        <div className="card-header">Test Area</div>
+        <div className="card-body">
+          <p>{currentTimestamp}</p>
+
+          <button
+            type="button"
+            // eslint-disable-next-line react/jsx-handler-names, react/jsx-no-bind
+            onClick={(): void => {
+              toggle();
+            }}
+          >
+            Toggle animation loop
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+```

src/hooks/useAnimationLoop/useAnimationLoop.stories.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable react/jsx-no-literals */
+import type { StoryObj } from '@storybook/react';
+import { useState, type ReactElement } from 'react';
+import { useToggle } from '../useToggle/useToggle.js';
+import { useAnimationLoop } from './useAnimationLoop.js';
+
+export default {
+  title: 'hooks/useAnimationLoop',
+};
+
+function DemoComponent(): ReactElement {
+  const [currentTimestamp, setCurrentTimestamp] = useState(Date.now);
+  const [state, toggle] = useToggle(true);
+  useAnimationLoop(() => {
+    setCurrentTimestamp(Date.now);
+  }, state);
+
+  return (
+    <div>
+      <div className="alert alert-primary">
+        <h4 className="alert-heading">Instructions!</h4>
+        <p className="mb-0">Click on the button to toggle the animation loop</p>
+      </div>
+      <div className="card border-dark" data-ref="test-area">
+        <div className="card-header">Test Area</div>
+        <div className="card-body">
+          <p>{currentTimestamp}</p>
+
+          <button
+            type="button"
+            // eslint-disable-next-line react/jsx-handler-names, react/jsx-no-bind
+            onClick={(): void => {
+              toggle();
+            }}
+          >
+            Toggle animation loop
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Demo: StoryObj = {
+  render() {
+    return <DemoComponent />;
+  },
+};

src/hooks/useAnimationLoop/useAnimationLoop.test.tsx

@@ -0,0 +1,10 @@
+import { renderHook } from '@testing-library/react';
+import { useAnimationLoop } from './useAnimationLoop.js';
+
+describe('useAnimationLoop', () => {
+  it('should not crash', async () => {
+    renderHook(useAnimationLoop, {
+      initialProps: undefined,
+    });
+  });
+});

src/hooks/useAnimationLoop/useAnimationLoop.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useRefValue } from '../useRefValue/useRefValue.js';
+
+/**
+ * useAnimationLoop hook is a wrapper around requestAnimationFrame method.
+ * This hook will execute a callback function every next frame.
+ *
+ * @param callback - callback function with @param delta which represents time passed since last invocation
+ * @param enabled - boolean which is used to play and pause the requestAnimationFrame
+ */
+export function useAnimationLoop(callback: (delta: number) => void, enabled = false): void {
+  const animationFrameRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const callbackRef = useRefValue(callback);
+
+  const tick = useCallback((time: number): void => {
+    const delta = time - lastTimeRef.current;
+    lastTimeRef.current = time;
+
+    callbackRef.current?.(delta);
+
+    animationFrameRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const play = useCallback(() => {
+    lastTimeRef.current = performance.now();
+    requestAnimationFrame(tick);
+  }, [tick]);
+
+  const pause = useCallback(() => {
+    cancelAnimationFrame(animationFrameRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (enabled) {
+      play();
+    }
+
+    return pause;
+  }, [enabled, pause, play]);
+}