🐛 FIX: unnecessary updates to class list

Author: pettiboy

README.md

@@ -37,6 +37,7 @@ yarn add react-ui-scrollspy
 
 2. Wrap the elements you want to spy on in the `<ScrollSpy>` component.
 
+<!-- prettier-ignore -->
 ```tsx
 import ScrollSpy from "react-ui-scrollspy";
 
@@ -53,7 +54,7 @@ import ScrollSpy from "react-ui-scrollspy";
     voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.
     Tempore, vero!
   </div>
-</ScrollSpy>;
+</ScrollSpy>
 ```
 
 3. Write styles for when the navigation element which is active in your `index.css`

demo-app/src/App.tsx

@@ -1,13 +1,14 @@
 import Center from "./components/Center/Center";
 import Navigation from "./components/Navigation/Navigation";
 import ScrollSpy from "react-ui-scrollspy";
+import ScrollSpyDev from "./components/src";
 
 function App() {
   return (
     <div>
       <Navigation />
 
-      <ScrollSpy scrollThrottle={100}>
+      <ScrollSpyDev scrollThrottle={100}>
         <Center id="orange" backgroundColor={"orange"}>
           <h1>Orange</h1>
         </Center>
@@ -20,7 +21,7 @@ function App() {
         <Center id="green" backgroundColor={"green"}>
           <h1>Green</h1>
         </Center>
-      </ScrollSpy>
+      </ScrollSpyDev>
     </div>
   );
 }

demo-app/src/components/src/ScrollSpy/ScrollSpy.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import {
+  MutableRefObject,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { isVisible } from "../utils/isVisible";
+import { throttle } from "../utils/throttle";
+
+interface ScrollSpyProps {
+  children: ReactNode;
+  navContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  scrollThrottle?: number;
+}
+
+const ScrollSpy = ({
+  children,
+  navContainerRef,
+  scrollThrottle = 300,
+}: ScrollSpyProps) => {
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const [navContainerItems, setNavContainerItems] = useState<NodeListOf<Element> | undefined>(); // prettier-ignore
+
+  // keeps track of the Id in navcontainer which is active
+  // so as to not update classLists unless it has been updated
+  const prevIdTracker = useRef("");
+
+  // To get the nav container items depending on whether the parent ref for the nav container is passed or not
+  useEffect(() => {
+    if (navContainerRef) {
+      setNavContainerItems(
+        navContainerRef.current?.querySelectorAll("[data-to-scrollspy-id]")
+      );
+    } else {
+      setNavContainerItems(document.querySelectorAll("[data-to-scrollspy-id]"));
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navContainerRef]);
+
+  // fire once after nav container items are set
+  useEffect(() => {
+    checkAndUpdateActiveScrollSpy();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navContainerItems]);
+
+  const checkAndUpdateActiveScrollSpy = () => {
+    const scrollParentContainer = scrollContainerRef.current;
+
+    // if there are no children, return
+    if (!(scrollParentContainer && navContainerItems)) return;
+
+    // loop over all children in scroll container
+    for (let i = 0; i < scrollParentContainer.children.length; i++) {
+      // get child element
+      const child = scrollParentContainer.children.item(i);
+      if (!child) continue;
+      const useChild = child as HTMLDivElement;
+
+      // check if the element is in the viewport
+      if (isVisible(useChild)) {
+        // if so, get its ID
+        const changeHighlightedItemId = useChild.id;
+
+        // if the element was same as the one currently active ignore it
+        if (prevIdTracker.current === changeHighlightedItemId) return;
+
+        // now loop over each element in the nav Container
+        navContainerItems.forEach((el) => {
+          const attrId = el.getAttribute("data-to-scrollspy-id");
+
+          // if the element contains 'active' the class remove it
+          if (el.classList.contains("active-scroll-spy")) {
+            el.classList.remove("active-scroll-spy");
+          }
+
+          // check if its ID matches the ID we got from the viewport
+          // also make sure it does not already contain the 'active' class
+          if (
+            attrId === changeHighlightedItemId &&
+            !el.classList.contains("active-scroll-spy")
+          ) {
+            el.classList.add("active-scroll-spy");
+
+            console.log("update to", changeHighlightedItemId);
+            prevIdTracker.current = changeHighlightedItemId;
+            window.history.pushState({}, "", `#${changeHighlightedItemId}`);
+          }
+        });
+        break;
+      }
+    }
+  };
+
+  window.addEventListener(
+    "scroll",
+    throttle(checkAndUpdateActiveScrollSpy, scrollThrottle)
+  );
+
+  return <div ref={scrollContainerRef}>{children}</div>;
+};
+
+export default ScrollSpy;

demo-app/src/components/src/index.tsx

@@ -0,0 +1,3 @@
+import ScrollSpyDev from "./ScrollSpy/ScrollSpy";
+
+export default ScrollSpyDev;

demo-app/src/components/src/utils/isVisible.ts

@@ -0,0 +1,12 @@
+// to check if the element is in viewport
+export const isVisible = (el: HTMLElement) => {
+  const rectInView = el.getBoundingClientRect();
+
+  // this decides how much of the element should be visible
+  const leniency = window.innerHeight * 0.5;
+
+  return (
+    rectInView.top + leniency >= 0 &&
+    rectInView.bottom - leniency <= window.innerHeight
+  );
+};

demo-app/src/components/src/utils/throttle.ts

@@ -0,0 +1,13 @@
+export const throttle = (callback: () => void, limit: number) => {
+  var tick = false;
+
+  return () => {
+    if (!tick) {
+      callback();
+      tick = true;
+      setTimeout(function () {
+        tick = false;
+      }, limit);
+    }
+  };
+};

demo-app/src/index.css

@@ -15,6 +15,7 @@ code {
 .active-scroll-spy {
   background-color: yellowgreen;
   border-radius: 15px;
+  transition: all 0.5s;
 }
 .ss-item {
   padding: 30px;

dev.md

@@ -0,0 +1,10 @@
+## To test package
+
+make required updates in the `src` (root) directory.
+
+```
+npm run build
+npm link
+cd demo-app
+npm link react-ui-scrollspy
+```