created the initial project library

Author: underfisk

.npmignore

@@ -0,0 +1,2 @@
+src
+tsconfig.json

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore artifacts:
+dist

.prettierrc.json

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "use-simple-scroll-spy",
+  "version": "1.0.0",
+  "description": "Tiny react hook that provides scroll spying",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/underfisk/use-simple-scroll-spy"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "pnpm run build"
+  },
+  "devDependencies": {
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/react": "^18.0.15",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
+  },
+  "peerDependencies": {
+    "react": ">= 16.x"
+  },
+  "keywords": [
+    "react",
+    "react scroll spy",
+    "scroll spy",
+    "scroll"
+  ],
+  "author": "underfisk",
+  "license": "MIT",
+  "dependencies": {
+    "lodash.throttle": "^4.1.1"
+  }
+}

pnpm-lock.yaml

@@ -0,0 +1,70 @@
+import { useState, useEffect } from "react";
+import throttle from "lodash.throttle";
+/**
+ * Tracks the given element ids and returns the active section
+ * @param elementIds
+ * @returns the index of the selected id in the array
+ */
+export const useSimplyScrollSpy = (elementIds: string[]) => {
+  const [activeSection, setActiveSection] = useState(() => {
+    const currentHash = location.hash;
+    const targetIndex = currentHash
+      ? elementIds.findIndex((id) => `#${id}` === currentHash)
+      : undefined;
+
+    if (targetIndex && targetIndex > 0) {
+      return targetIndex;
+    }
+    return 0;
+  });
+
+  // Sync the URL hash
+  useEffect(() => {
+    const currentHash = location.hash;
+    const sectionHash = `#${elementIds[activeSection]}`;
+    // If we have the updated hash just ignore
+    if (currentHash === sectionHash) {
+      return;
+    }
+    history.pushState(undefined, "", sectionHash);
+  }, [activeSection]);
+
+  const handle = throttle(() => {
+    let currentSectionId = activeSection;
+    const sectionElements: HTMLElement[] = [];
+    for (const id of elementIds) {
+      const ele = document.getElementById(id);
+      if (ele) {
+        sectionElements.push(ele);
+      }
+    }
+
+    for (let i = 0; i < sectionElements.length; i++) {
+      const section = sectionElements[i];
+      // Needs to be a valid DOM Element
+      if (!section || !(section instanceof Element)) continue;
+      // GetBoundingClientRect returns values relative to viewport
+      if (section.getBoundingClientRect().top + -80 < 0) {
+        currentSectionId = i;
+        continue;
+      }
+      // No need to continue loop, if last element has been detected
+      break;
+    }
+
+    setActiveSection(currentSectionId);
+  }, 100);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handle);
+
+    // Run initially
+    handle();
+
+    return () => {
+      window.removeEventListener("scroll", handle);
+    };
+  }, [elementIds]);
+
+  return activeSection;
+};

src/index.tsx

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "removeComments": false,
+    "jsx": "react-jsx",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}