sse-hooks 1.3.0 → 2.0.0

package/dist/cli.mjs

@@ -0,0 +1,373 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { Command } from "commander";
+
+// src/cli/commands/add.ts
+import inquirer from "inquirer";
+
+// src/cli/utils/config.ts
+import fs from "fs-extra";
+import path from "path";
+
+// src/cli/utils/logger.ts
+import chalk from "chalk";
+var error = (message) => {
+  console.error(chalk.red(`\u274C ${message}`));
+};
+var success = (message) => {
+  console.log(chalk.green(`\u2705 ${message}`));
+};
+var info = (message) => {
+  console.log(chalk.blue(`\u2139 ${message}`));
+};
+var warn = (message) => {
+  console.warn(chalk.yellow(`\u26A0 ${message}`));
+};
+
+// src/cli/utils/constants.ts
+var ORIGIN = "https://sse-hooks.vercel.app";
+var REGISTRY_CONFIG = {
+  ORIGIN,
+  BASE_URL: `${ORIGIN}/api/registry/hook`,
+  MANIFEST_ENDPOINT: "manifest.json",
+  HOOK_ENDPOINT: (name) => `${name}/meta.json`,
+  ERRORS: {
+    FETCH_FAILED: "Failed to fetch from registry",
+    MANIFEST_NOT_FOUND: "Registry manifest not found",
+    HOOK_NOT_FOUND: "Hook not found in registry"
+  }
+};
+var DEFAULT_CONFIG_VALUES = {
+  HOOKS_DIR: "src/hooks",
+  REPO_URL: REGISTRY_CONFIG.BASE_URL
+};
+var CLI = {
+  COMMAND_NAME: "sse-tools",
+  CONFIG_FILE: "sse.config.json",
+  COMMANDS: {
+    INIT: "init",
+    ADD: "add",
+    LIST: "list"
+  },
+  PROMPTS: {
+    HOOKS_DIR: "Where should hooks be stored?",
+    DEFAULT_LANG: "Default hook language?",
+    REPO_URL: "Registry API URL?"
+  }
+};
+
+// src/cli/utils/config.ts
+async function getConfig() {
+  try {
+    const configPath = path.resolve(CLI.CONFIG_FILE);
+    if (!await fs.pathExists(configPath)) {
+      warn(
+        `Configuration not found. Run "${CLI.COMMAND_NAME} ${CLI.COMMANDS.INIT}" first.`
+      );
+      throw new Error("Configuration missing");
+    }
+    return await fs.readJson(configPath);
+  } catch (err) {
+    error("Failed to read configuration");
+    throw err;
+  }
+}
+async function saveConfig(config) {
+  try {
+    await fs.writeJson(CLI.CONFIG_FILE, config, { spaces: 2 });
+  } catch (err) {
+    error("Failed to save configuration");
+    throw err;
+  }
+}
+
+// src/cli/utils/registry.ts
+import axios from "axios";
+import fs2 from "fs-extra";
+import path2 from "path";
+async function fetchHookList(registryUrl) {
+  try {
+    const baseUrl = registryUrl.replace(/\/$/, "");
+    const manifestUrl = `${baseUrl}/${REGISTRY_CONFIG.MANIFEST_ENDPOINT}`;
+    info(`Fetching hook list...`);
+    const response = await axios.get(manifestUrl);
+    if (response.data?.hooks && Array.isArray(response.data.hooks)) {
+      return response.data.hooks;
+    }
+    throw new Error(REGISTRY_CONFIG.ERRORS.MANIFEST_NOT_FOUND);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Unknown error";
+    error("Failed to fetch hook list: " + message);
+    throw err;
+  }
+}
+async function downloadHook(registryUrl, hookNameOrUrl, language, filePath, metaOnly = false) {
+  try {
+    let hookUrl;
+    if (hookNameOrUrl.startsWith("http://") || hookNameOrUrl.startsWith("https://")) {
+      hookUrl = hookNameOrUrl;
+    } else {
+      const baseUrl = registryUrl.replace(/\/$/, "");
+      hookUrl = `${baseUrl}/${REGISTRY_CONFIG.HOOK_ENDPOINT(hookNameOrUrl)}`;
+    }
+    const response = await axios.get(hookUrl);
+    const metaData = response.data;
+    if (metaOnly) {
+      return metaData;
+    }
+    const code = language === "js" ? metaData.file.js : metaData.file.content;
+    if (!code) {
+      throw new Error(`Code for ${language.toUpperCase()} not found.`);
+    }
+    if (filePath) {
+      await fs2.ensureDir(path2.dirname(filePath));
+      await fs2.writeFile(filePath, code);
+    }
+    return metaData;
+  } catch (err) {
+    if (axios.isAxiosError(err) && err.response?.status === 404) {
+      error(`Hook "${hookNameOrUrl}" not found in registry.`);
+      throw new Error(REGISTRY_CONFIG.ERRORS.HOOK_NOT_FOUND);
+    }
+    const message = err instanceof Error ? err.message : "Unknown error";
+    error(`Failed to process hook: ${hookNameOrUrl} - ${message}`);
+    throw err;
+  }
+}
+
+// src/cli/commands/add.ts
+import path4 from "path";
+import fs4 from "fs-extra";
+import chalk3 from "chalk";
+import ora2 from "ora";
+
+// src/cli/utils/npm.ts
+import path3 from "path";
+import fs3 from "fs/promises";
+import { execSync } from "child_process";
+import { error as error2 } from "console";
+import chalk2 from "chalk";
+import ora from "ora";
+async function installNpmDependencies(dependencies = []) {
+  if (!dependencies.length) return;
+  const pkgPath = path3.join(process.cwd(), "package.json");
+  let pkg2;
+  try {
+    pkg2 = JSON.parse(await fs3.readFile(pkgPath, "utf-8"));
+  } catch {
+    error2("package.json not found. Skipping dependency installation.");
+    return;
+  }
+  const allDeps = { ...pkg2.dependencies, ...pkg2.devDependencies };
+  const missingDeps = dependencies.filter((dep) => !allDeps[dep]);
+  if (missingDeps.length > 0) {
+    const spinner = ora(
+      `Installing dependencies: ${chalk2.cyan(missingDeps.join(", "))}...`
+    ).start();
+    try {
+      const agent = process.env.npm_config_user_agent || "";
+      const command = agent.includes("pnpm") ? "pnpm add" : agent.includes("yarn") ? "yarn add" : "npm install";
+      execSync(`${command} ${missingDeps.join(" ")}`, { stdio: "ignore" });
+      spinner.succeed(chalk2.green("Dependencies installed successfully."));
+    } catch (err) {
+      spinner.fail(chalk2.red("Failed to install dependencies."));
+    }
+  }
+}
+
+// src/cli/commands/add.ts
+async function addCommand(hookNames = [], options = {}) {
+  try {
+    const config = await getConfig();
+    const installDir = config.hooks.hooksDir;
+    const language = options?.language || config?.hooks.defaultLanguage;
+    let initialQueue = [...hookNames];
+    if (initialQueue.length === 0) {
+      const availableHooks = await fetchHookList(config.hooks.registryUrl);
+      const { selectedHooks } = await inquirer.prompt([
+        {
+          type: "checkbox",
+          name: "selectedHooks",
+          message: "Select hooks to install:",
+          pageSize: 10,
+          choices: availableHooks.map((hook) => ({
+            name: `${hook.name} - ${hook.description}`,
+            value: hook.name
+          })),
+          validate: (input) => input.length > 0 || "You must choose at least one hook"
+        }
+      ]);
+      initialQueue = selectedHooks;
+    }
+    const hooksToInstall = /* @__PURE__ */ new Set();
+    const dependenciesToInstall = /* @__PURE__ */ new Set();
+    const payloadMap = /* @__PURE__ */ new Map();
+    const resolveSpinner = ora2("Resolving hooks...").start();
+    try {
+      const queue = [...initialQueue];
+      while (queue.length > 0) {
+        const currentInput = queue.shift();
+        if (!currentInput.startsWith("http") && hooksToInstall.has(currentInput)) {
+          continue;
+        }
+        const meta = await downloadHook(
+          config.hooks.registryUrl,
+          currentInput,
+          language,
+          "",
+          true
+        );
+        const realName = meta.name;
+        if (hooksToInstall.has(realName)) continue;
+        hooksToInstall.add(realName);
+        payloadMap.set(realName, meta);
+        if (meta.registryDependencies) {
+          queue.push(...meta.registryDependencies);
+        }
+        if (meta.dependencies) {
+          meta.dependencies.forEach((dep) => dependenciesToInstall.add(dep));
+        }
+      }
+      resolveSpinner.stop();
+    } catch (err) {
+      resolveSpinner.fail("Failed to resolve hooks.");
+      error(err instanceof Error ? err.message : "Unknown error");
+      return;
+    }
+    const sortedHooks = Array.from(hooksToInstall).sort();
+    const sortedDeps = Array.from(dependenciesToInstall).sort();
+    if (sortedHooks.length) {
+      console.log(chalk3.bold.cyan(`
+Hooks:`));
+      sortedHooks.forEach((h) => console.log(`- ${h}`));
+    }
+    if (sortedDeps.length) {
+      console.log(chalk3.bold.cyan(`
+Dependencies:`));
+      sortedDeps.forEach((d) => console.log(`- ${d}`));
+    }
+    console.log("");
+    const { proceed } = await inquirer.prompt([
+      {
+        type: "confirm",
+        name: "proceed",
+        message: "Ready to install. Proceed?",
+        default: true
+      }
+    ]);
+    if (!proceed) {
+      info("Operation cancelled.");
+      return;
+    }
+    if (sortedDeps.length) {
+      await installNpmDependencies(sortedDeps);
+    }
+    const writeSpinner = ora2("Writing components...").start();
+    for (const name of sortedHooks) {
+      const meta = payloadMap.get(name);
+      const code = language === "js" ? meta.file.js : meta.file.content;
+      const fileName = `${meta.name}.${language}`;
+      const filePath = path4.join(installDir, fileName);
+      try {
+        await fs4.access(filePath);
+      } catch {
+      }
+      await fs4.ensureDir(path4.dirname(filePath));
+      await fs4.writeFile(filePath, code);
+    }
+    writeSpinner.succeed(chalk3.green("Done."));
+    if (hooksToInstall.size > 0) {
+      success(
+        `Installed ${hooksToInstall.size} component(s) to ${chalk3.cyan(
+          installDir
+        )}`
+      );
+    }
+  } catch (err) {
+    if (err.message === "Configuration missing") {
+      error('No configuration found. Please run "sse-tool init" first.');
+    } else {
+      error(err instanceof Error ? err.message : "An unknown error occurred");
+    }
+  }
+}
+
+// src/cli/commands/list.ts
+import Table from "cli-table3";
+async function listCommand() {
+  try {
+    const config = await getConfig();
+    const hooks = await fetchHookList(config.hooks.registryUrl);
+    const table = new Table({
+      head: ["Hook Name", "Description"],
+      colWidths: [25, 60]
+    });
+    hooks.forEach((hook) => {
+      table.push([hook.name, hook.description || "-"]);
+    });
+    console.log(table.toString());
+    info(`Total hooks: ${hooks.length}`);
+  } catch (err) {
+    error(
+      "Failed to list hooks: " + (err instanceof Error ? err.message : "Unknown error")
+    );
+  }
+}
+
+// src/cli/commands/init.ts
+import inquirer2 from "inquirer";
+import fs5 from "fs-extra";
+import path5 from "path";
+async function initCommand() {
+  let isTypeScriptProject = false;
+  try {
+    const pkgPath = path5.resolve("package.json");
+    if (await fs5.pathExists(pkgPath)) {
+      const pkg2 = await fs5.readJson(pkgPath);
+      const allDeps = { ...pkg2.dependencies, ...pkg2.devDependencies };
+      if (allDeps.typescript) {
+        isTypeScriptProject = true;
+      }
+    }
+  } catch (err) {
+  }
+  const answers = await inquirer2.prompt([
+    {
+      type: "input",
+      name: "hooksDir",
+      message: CLI.PROMPTS.HOOKS_DIR,
+      default: DEFAULT_CONFIG_VALUES.HOOKS_DIR
+    },
+    {
+      type: "list",
+      name: "defaultLanguage",
+      message: CLI.PROMPTS.DEFAULT_LANG,
+      choices: ["ts", "js"],
+      default: isTypeScriptProject ? "ts" : "js"
+    }
+  ]);
+  await saveConfig({
+    hooks: {
+      hooksDir: answers.hooksDir,
+      defaultLanguage: answers.defaultLanguage,
+      registryUrl: DEFAULT_CONFIG_VALUES.REPO_URL
+    }
+  });
+  success("Configuration saved!");
+}
+
+// src/cli.ts
+import { readFileSync } from "fs";
+var program = new Command();
+var pkg = JSON.parse(
+  readFileSync(new URL("../package.json", import.meta.url), "utf-8")
+);
+program.name(pkg?.name || "sse-tool").description("CLI for managing custom React hooks").version(`${pkg?.version}`, "-v, --version", "Output the current version");
+program.command("init").description("Initialize hooks configuration").action(initCommand);
+program.command("add [hooks...]").description("Add one or more custom hooks").option("-l, --language <language>", "Specify hook language (js|ts)").option("-d, --dir <directory>", "Specify installation directory").action((hooks, options) => {
+  const hookNames = Array.isArray(hooks) ? hooks : hooks ? [hooks] : [];
+  addCommand(hookNames, options);
+});
+program.command("list").description("List available hooks").action(listCommand);
+program.parse(process.argv);

package/package.json

@@ -1,46 +1,29 @@
 {
   "name": "sse-hooks",
-  "version": "1.3.0",
-  "description": "React hook library, ready to use, written in Typescript.",
+  "version": "2.0.0",
+  "description": "Tools for SSE Hooks",
   "license": "MIT",
   "author": "SSE World",
-  "type": "module",
+  "scripts": {
+    "build": "tsup"
+  },
   "files": [
-    "dist"
+    "dist/**/*"
   ],
-  "main": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    }
-  },
-  "scripts": {
-    "build": "unbuild",
-    "build:index": "node ./scripts/generate-index.js",
-    "meta:gen": "node scripts/generate-meta.js --create",
-    "meta:rm": "node scripts/generate-meta.js --rm"
+  "bin": {
+    "sse-hooks": "dist/cli.mjs"
   },
   "devDependencies": {
-    "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "prettier": "^3.8.1",
-    "typescript": "^5.9.2"
+    "@types/fs-extra": "^11.0.4",
+    "tsup": "^8.5.1"
   },
   "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "unbuild": "^3.6.1"
+    "axios": "^1.13.4",
+    "chalk": "^4.1.2",
+    "cli-table3": "^0.6.5",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^13.2.2",
+    "ora": "^9.1.0"
   }
 }

package/README.md

@@ -1,171 +0,0 @@
-
-
-### 📡 Sensors
-- [`useAudioRecorder`](https://sse-hooks.vercel.app/docs/hooks/use-audio-recorder) — A comprehensive hook for audio recording with real-time analysis using getUserMedia, MediaRecorder, and Web Audio APIs.
-- [`useHover`](https://sse-hooks.vercel.app/docs/hooks/use-hover) — Custom hook that tracks whether a DOM element is being hovered over.
-- [`useMediaQuery`](https://sse-hooks.vercel.app/docs/hooks/use-media-query) — Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.
-- [`useMediaSession`](https://sse-hooks.vercel.app/docs/hooks/use-media-session) — Custom hook that interacts with the [Media Session API](https://developer.
-- [`useResizeObserver`](https://sse-hooks.vercel.app/docs/hooks/use-resize-observer) — Custom hook that observes the size of an element using the [`ResizeObserver API`](https://developer.
-- [`useScreenShare`](https://sse-hooks.vercel.app/docs/hooks/use-screen-share) — Custom hook that captures the user's screen or specific application window.
-- [`useUserMedia`](https://sse-hooks.vercel.app/docs/hooks/use-user-media) — Custom hook that captures audio and video from the user's device.
-
-### 💾 State
-- [`useBoolean`](https://sse-hooks.vercel.app/docs/hooks/use-boolean) — Custom hook that handles boolean state with useful utility functions.
-- [`useCounter`](https://sse-hooks.vercel.app/docs/hooks/use-counter) — Custom hook that manages a counter with increment, decrement, reset, and setCount functionalities.
-- [`useMap`](https://sse-hooks.vercel.app/docs/hooks/use-map) — Custom hook that manages a key-value [`Map`](https://developer.
-- [`useStep`](https://sse-hooks.vercel.app/docs/hooks/use-step) — Custom hook that manages and navigates between steps in a multi-step process.
-- [`useToggle`](https://sse-hooks.vercel.app/docs/hooks/use-toggle) — Custom hook that manages a boolean toggle state in React components.
-
-### ⚡ Side Effects
-- [`useCountdown`](https://sse-hooks.vercel.app/docs/hooks/use-countdown) — Custom hook that manages countdown.
-- [`useDebounceCallback`](https://sse-hooks.vercel.app/docs/hooks/use-debounce-callback) — Custom hook that creates a debounced version of a callback function.
-- [`useDebounceValue`](https://sse-hooks.vercel.app/docs/hooks/use-debounce-value) — Custom hook that returns a debounced version of the provided value, along with a function to update it.
-- [`useInterval`](https://sse-hooks.vercel.app/docs/hooks/use-interval) — Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.
-- [`useTimeout`](https://sse-hooks.vercel.app/docs/hooks/use-timeout) — Custom hook that handles timeouts in React components using the [`setTimeout API`](https://developer.
-
-### 🔄 LifeCycle
-- [`useIsClient`](https://sse-hooks.vercel.app/docs/hooks/use-is-client) — Custom hook that determines if the code is running on the client side (in the browser).
-- [`useIsMounted`](https://sse-hooks.vercel.app/docs/hooks/use-is-mounted) — Custom hook that determines if the component is currently mounted.
-- [`useUnmount`](https://sse-hooks.vercel.app/docs/hooks/use-unmount) — Custom hook that runs a cleanup function when the component is unmounted.
-
-### 🎨 DOM & UI
-- [`useClickAnyWhere`](https://sse-hooks.vercel.app/docs/hooks/use-click-any-where) — Custom hook that handles click events anywhere on the document.
-- [`useClickAway`](https://sse-hooks.vercel.app/docs/hooks/use-click-away) — Custom hook that triggers a callback when a user clicks outside the referenced element.
-- [`useDarkMode`](https://sse-hooks.vercel.app/docs/hooks/use-dark-mode) — Custom hook that returns the current state of the dark mode.
-- [`useDocumentTitle`](https://sse-hooks.vercel.app/docs/hooks/use-document-title) — Custom hook that sets the document title.
-- [`useScript`](https://sse-hooks.vercel.app/docs/hooks/use-script) — Custom hook that dynamically loads scripts and tracking their loading status.
-- [`useScrollLock`](https://sse-hooks.vercel.app/docs/hooks/use-scroll-lock) — A custom hook that locks and unlocks scroll.
-- [`useTernaryDarkMode`](https://sse-hooks.vercel.app/docs/hooks/use-ternary-dark-mode) — Custom hook that manages ternary (system, dark, light) dark mode with local storage support.
-
-### 📦 Storage
-- [`useIndexedDB`](https://sse-hooks.vercel.app/docs/hooks/use-indexed-db) — Custom hook that provides an interface to the [`IndexedDB API`](https://developer.
-- [`useLocalStorage`](https://sse-hooks.vercel.app/docs/hooks/use-local-storage) — Custom hook that uses the [`localStorage API`](https://developer.
-- [`useSessionStorage`](https://sse-hooks.vercel.app/docs/hooks/use-session-storage) — Custom hook that uses the [`sessionStorage API`](https://developer.
-
-### 🌐 Network
-- [`useFetch`](https://sse-hooks.vercel.app/docs/hooks/use-fetch) — Custom hook that provides a wrapper around the native [`fetch API`](https://developer.
-
-### 📦 Uncategorized
-- [`useCookie`](https://sse-hooks.vercel.app/docs/hooks/use-cookie) — Custom hook that manages state synchronized with a browser [`cookie`](https://developer.
-- [`useCopyToClipboard`](https://sse-hooks.vercel.app/docs/hooks/use-copy-to-clipboard) — Custom hook that copies text to the clipboard using the [`Clipboard API`](https://developer.
-- [`useEventCallback`](https://sse-hooks.vercel.app/docs/hooks/use-event-callback) — Custom hook that creates a memoized event callback.
-- [`useEventListener`](https://sse-hooks.vercel.app/docs/hooks/use-event-listener) — .
-- [`useForkRef`](https://sse-hooks.vercel.app/docs/hooks/use-fork-ref) — Merges refs into a single memoized callback ref or `null`.
-- [`useIntersectionObserver`](https://sse-hooks.vercel.app/docs/hooks/use-intersection-observer) — Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.
-- [`useReadLocalStorage`](https://sse-hooks.vercel.app/docs/hooks/use-read-local-storage) — .
-- [`useScreen`](https://sse-hooks.vercel.app/docs/hooks/use-screen) — .
-- [`useWindowSize`](https://sse-hooks.vercel.app/docs/hooks/use-window-size) — .
-
-
-- [`useAudioRecorder`](/react-hook/use-audio-recorder) — A comprehensive hook for audio recording with real-time analysis using getUserMedia, MediaRecorder, and Web Audio APIs.
-- [`useBoolean`](/react-hook/use-boolean) — Custom hook that handles boolean state with useful utility functions.
-- [`useClickAnyWhere`](/react-hook/use-click-any-where) — Custom hook that handles click events anywhere on the document.
-- [`useClickAway`](/react-hook/use-click-away) — Custom hook that triggers a callback when a user clicks outside the referenced element.
-- [`useCookie`](/react-hook/use-cookie) — Custom hook that manages state synchronized with a browser [`cookie`](https://developer.
-- [`useCopyToClipboard`](/react-hook/use-copy-to-clipboard) — Custom hook that copies text to the clipboard using the [`Clipboard API`](https://developer.
-- [`useCountdown`](/react-hook/use-countdown) — Custom hook that manages countdown.
-- [`useCounter`](/react-hook/use-counter) — Custom hook that manages a counter with increment, decrement, reset, and setCount functionalities.
-- [`useDarkMode`](/react-hook/use-dark-mode) — Custom hook that returns the current state of the dark mode.
-- [`useDebounceCallback`](/react-hook/use-debounce-callback) — Custom hook that creates a debounced version of a callback function.
-- [`useDebounceValue`](/react-hook/use-debounce-value) — Custom hook that returns a debounced version of the provided value, along with a function to update it.
-- [`useDocumentTitle`](/react-hook/use-document-title) — Custom hook that sets the document title.
-- [`useEventCallback`](/react-hook/use-event-callback) — Custom hook that creates a memoized event callback.
-- [`useEventListener`](/react-hook/use-event-listener) — .
-- [`useFetch`](/react-hook/use-fetch) — Custom hook that provides a wrapper around the native [`fetch API`](https://developer.
-- [`useForkRef`](/react-hook/use-fork-ref) — Merges refs into a single memoized callback ref or `null`.
-- [`useHover`](/react-hook/use-hover) — Custom hook that tracks whether a DOM element is being hovered over.
-- [`useIndexedDB`](/react-hook/use-indexed-db) — Custom hook that provides an interface to the [`IndexedDB API`](https://developer.
-- [`useIntersectionObserver`](/react-hook/use-intersection-observer) — Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.
-- [`useInterval`](/react-hook/use-interval) — Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.
-- [`useIsClient`](/react-hook/use-is-client) — Custom hook that determines if the code is running on the client side (in the browser).
-- [`useIsMounted`](/react-hook/use-is-mounted) — Custom hook that determines if the component is currently mounted.
-- [`useLocalStorage`](/react-hook/use-local-storage) — Custom hook that uses the [`localStorage API`](https://developer.
-- [`useMap`](/react-hook/use-map) — Custom hook that manages a key-value [`Map`](https://developer.
-- [`useMediaQuery`](/react-hook/use-media-query) — Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.
-- [`useMediaSession`](/react-hook/use-media-session) — Custom hook that interacts with the [Media Session API](https://developer.
-- [`useReadLocalStorage`](/react-hook/use-read-local-storage) — .
-- [`useResizeObserver`](/react-hook/use-resize-observer) — Custom hook that observes the size of an element using the [`ResizeObserver API`](https://developer.
-- [`useScreen`](/react-hook/use-screen) — .
-- [`useScreenShare`](/react-hook/use-screen-share) — Custom hook that captures the user's screen or specific application window.
-- [`useScript`](/react-hook/use-script) — Custom hook that dynamically loads scripts and tracking their loading status.
-- [`useScrollLock`](/react-hook/use-scroll-lock) — A custom hook that locks and unlocks scroll.
-- [`useSessionStorage`](/react-hook/use-session-storage) — Custom hook that uses the [`sessionStorage API`](https://developer.
-- [`useStep`](/react-hook/use-step) — Custom hook that manages and navigates between steps in a multi-step process.
-- [`useTernaryDarkMode`](/react-hook/use-ternary-dark-mode) — Custom hook that manages ternary (system, dark, light) dark mode with local storage support.
-- [`useTimeout`](/react-hook/use-timeout) — Custom hook that handles timeouts in React components using the [`setTimeout API`](https://developer.
-- [`useToggle`](/react-hook/use-toggle) — Custom hook that manages a boolean toggle state in React components.
-- [`useUnmount`](/react-hook/use-unmount) — Custom hook that runs a cleanup function when the component is unmounted.
-- [`useUserMedia`](/react-hook/use-user-media) — Custom hook that captures audio and video from the user's device.
-- [`useWindowSize`](/react-hook/use-window-size) — .
-## 🪝 Available Hooks
-
-<!-- HOOKS:START -->
-
-### 📡 Sensors
-- [`useAudioRecorder`](https://sse-hooks.vercel.app/docs/hooks/use-audio-recorder) — A comprehensive hook for audio recording with real-time analysis using getUserMedia, MediaRecorder, and Web Audio APIs.
-- [`useConferenceSystem`](https://sse-hooks.vercel.app/docs/hooks/use-conference-system) — A comprehensive hook for managing video conferencing state, including camera access, screen sharing, network monitoring, and automatic media quality adjustment.
-- [`useHover`](https://sse-hooks.vercel.app/docs/hooks/use-hover) — Custom hook that tracks whether a DOM element is being hovered over.
-- [`useMediaQuery`](https://sse-hooks.vercel.app/docs/hooks/use-media-query) — Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.
-- [`useMediaSession`](https://sse-hooks.vercel.app/docs/hooks/use-media-session) — Custom hook that interacts with the [Media Session API](https://developer.
-- [`useResizeObserver`](https://sse-hooks.vercel.app/docs/hooks/use-resize-observer) — Custom hook that observes the size of an element using the [`ResizeObserver API`](https://developer.
-- [`useScreenShare`](https://sse-hooks.vercel.app/docs/hooks/use-screen-share) — Custom hook that captures the user's screen or specific application window.
-- [`useUserMedia`](https://sse-hooks.vercel.app/docs/hooks/use-user-media) — Custom hook that captures audio and video from the user's device.
-
-### 💾 State
-- [`useBoolean`](https://sse-hooks.vercel.app/docs/hooks/use-boolean) — Custom hook that handles boolean state with useful utility functions.
-- [`useCounter`](https://sse-hooks.vercel.app/docs/hooks/use-counter) — Custom hook that manages a counter with increment, decrement, reset, and setCount functionalities.
-- [`useMap`](https://sse-hooks.vercel.app/docs/hooks/use-map) — Custom hook that manages a key-value [`Map`](https://developer.
-- [`useRoleGuard`](https://sse-hooks.vercel.app/docs/hooks/use-role-guard) — Custom hook for Role-Based Access Control (RBAC).
-- [`useStep`](https://sse-hooks.vercel.app/docs/hooks/use-step) — Custom hook that manages and navigates between steps in a multi-step process.
-- [`useToggle`](https://sse-hooks.vercel.app/docs/hooks/use-toggle) — Custom hook that manages a boolean toggle state in React components.
-
-### ⚡ Side Effects
-- [`useCountdown`](https://sse-hooks.vercel.app/docs/hooks/use-countdown) — Custom hook that manages countdown.
-- [`useDebounceCallback`](https://sse-hooks.vercel.app/docs/hooks/use-debounce-callback) — Custom hook that creates a debounced version of a callback function.
-- [`useDebounceValue`](https://sse-hooks.vercel.app/docs/hooks/use-debounce-value) — Custom hook that returns a debounced version of the provided value, along with a function to update it.
-- [`useInterval`](https://sse-hooks.vercel.app/docs/hooks/use-interval) — Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.
-- [`useTimeout`](https://sse-hooks.vercel.app/docs/hooks/use-timeout) — Custom hook that handles timeouts in React components using the [`setTimeout API`](https://developer.
-
-### 🔄 LifeCycle
-- [`useIsClient`](https://sse-hooks.vercel.app/docs/hooks/use-is-client) — Custom hook that determines if the code is running on the client side (in the browser).
-- [`useIsMounted`](https://sse-hooks.vercel.app/docs/hooks/use-is-mounted) — Custom hook that determines if the component is currently mounted.
-- [`useUnmount`](https://sse-hooks.vercel.app/docs/hooks/use-unmount) — Custom hook that runs a cleanup function when the component is unmounted.
-
-### 🎨 DOM & UI
-- [`useClickAnyWhere`](https://sse-hooks.vercel.app/docs/hooks/use-click-any-where) — Custom hook that handles click events anywhere on the document.
-- [`useClickAway`](https://sse-hooks.vercel.app/docs/hooks/use-click-away) — Custom hook that triggers a callback when a user clicks outside the referenced element.
-- [`useDarkMode`](https://sse-hooks.vercel.app/docs/hooks/use-dark-mode) — Custom hook that returns the current state of the dark mode.
-- [`useDocumentTitle`](https://sse-hooks.vercel.app/docs/hooks/use-document-title) — Custom hook that sets the document title.
-- [`useForkRef`](https://sse-hooks.vercel.app/docs/hooks/use-fork-ref) — Merges refs into a single memoized callback ref or `null`.
-- [`useScript`](https://sse-hooks.vercel.app/docs/hooks/use-script) — Custom hook that dynamically loads scripts and tracking their loading status.
-- [`useScrollLock`](https://sse-hooks.vercel.app/docs/hooks/use-scroll-lock) — A custom hook that locks and unlocks scroll.
-- [`useTernaryDarkMode`](https://sse-hooks.vercel.app/docs/hooks/use-ternary-dark-mode) — Custom hook that manages ternary (system, dark, light) dark mode with local storage support.
-
-### 📦 Storage
-- [`useCookie`](https://sse-hooks.vercel.app/docs/hooks/use-cookie) — Custom hook that manages state synchronized with a browser [`cookie`](https://developer.
-- [`useIndexedDB`](https://sse-hooks.vercel.app/docs/hooks/use-indexed-db) — Custom hook that provides an interface to the [`IndexedDB API`](https://developer.
-- [`useLocalStorage`](https://sse-hooks.vercel.app/docs/hooks/use-local-storage) — Custom hook that uses the [`localStorage API`](https://developer.
-- [`useSessionStorage`](https://sse-hooks.vercel.app/docs/hooks/use-session-storage) — Custom hook that uses the [`sessionStorage API`](https://developer.
-
-### 🌐 Network
-- [`useFetch`](https://sse-hooks.vercel.app/docs/hooks/use-fetch) — Custom hook that provides a wrapper around the native [`fetch API`](https://developer.
-- [`useNetworkInformation`](https://sse-hooks.vercel.app/docs/hooks/use-network-information) — Custom hook that tracks the device's network connection status and details (speed, type)
-using the Network Information API.
-
-### 🛠️ Utilities
-- [`useCopyToClipboard`](https://sse-hooks.vercel.app/docs/hooks/use-copy-to-clipboard) — Custom hook that copies text to the clipboard using the [`Clipboard API`](https://developer.
-- [`useEventCallback`](https://sse-hooks.vercel.app/docs/hooks/use-event-callback) — Custom hook that creates a memoized event callback.
-- [`useKbd`](https://sse-hooks.vercel.app/docs/hooks/use-kbd) — Custom hook that detects the operating system (Mac vs.
-- [`useMediaQuality`](https://sse-hooks.vercel.app/docs/hooks/use-media-quality) — Custom hook to manage video stream quality by applying constraints (resolution and frame rate)
-to a MediaStream track.
-- [`useSSR`](https://sse-hooks.vercel.app/docs/hooks/use-ssr) — Custom hook that detects the current environment (Browser, Server, or Native)
-and capability support (Workers, EventListeners).
-- [`useSymbol`](https://sse-hooks.vercel.app/docs/hooks/use-symbol) — Custom hook for managing ES6 Symbols.
-
-### 📦 Uncategorized
-- [`useEventListener`](https://sse-hooks.vercel.app/docs/hooks/use-event-listener) — .
-- [`useIntersectionObserver`](https://sse-hooks.vercel.app/docs/hooks/use-intersection-observer) — Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.
-- [`useReadLocalStorage`](https://sse-hooks.vercel.app/docs/hooks/use-read-local-storage) — .
-- [`useScreen`](https://sse-hooks.vercel.app/docs/hooks/use-screen) — .
-- [`useWindowSize`](https://sse-hooks.vercel.app/docs/hooks/use-window-size) — .
-<!-- HOOKS:END -->