✨ NEW: add optional useBoxMethod prop (beta)

Author: pettiboy

demo-app/.gitignore

@@ -21,3 +21,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# ScrollSpy test component
+src/components/src
+
+# packages
+*.tgz

demo-app/package-lock.json

@@ -14,7 +14,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "react-ui-scrollspy": "^2.0.0",
+    "react-ui-scrollspy": "file:react-ui-scrollspy-2.0.0.tgz",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"
   },

demo-app/package.json

@@ -1,6 +1,7 @@
 import Center from "./components/Center/Center";
 import Navigation from "./components/Navigation/Navigation";
-import ScrollSpy from "react-ui-scrollspy";
+// import ScrollSpy from "react-ui-scrollspy";
+import ScrollSpy from "./components/src/index";
 import Buttons from "./components/Buttons/Buttons";
 
 function App() {

demo-app/src/App.tsx

@@ -16,5 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src", "../src"]
 }

demo-app/tsconfig.json

@@ -12,7 +12,12 @@ npm link react-ui-scrollspy
 creates a `.tgz`
 
 ```bash
+npm run build
 npm pack
+mv react-ui-scrollspy-2.0.0.tgz ./demo-app
+cd demo-app
+npm uninstall react-ui-scrollspy
+npm install react-ui-scrollspy-2.0.0.tgz --production
 ```
 
 ## Commit Messages

dev.md

@@ -1,19 +1,15 @@
 {
-  "name": "@pettiboy/react-ui-scrollspy",
+  "name": "react-ui-scrollspy",
   "version": "2.0.0",
   "description": "Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others",
   "main": "dist/index.js",
   "scripts": {
     "build": "rollup -c",
     "start": "rollup -c -w"
   },
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com/"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pettiboy/react-ui-scrollspy.git",
-    "directory": "react-ui-scrollspy"
+    "url": "git+https://github.com/pettiboy/react-ui-scrollspy.git"
   },
   "bugs": {
     "url": "https://github.com/pettiboy/react-ui-scrollspy/issues"

dist/index.js

@@ -6,7 +6,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { isVisible } from "../utils/isVisible";
 import { throttle } from "../utils/throttle";
 
 interface ScrollSpyProps {
@@ -29,6 +28,8 @@ interface ScrollSpyProps {
   // customize attributes
   useDataAttribute?: string;
   activeClass?: string;
+
+  useBoxMethod?: boolean;
 }
 
 const ScrollSpy = ({
@@ -51,6 +52,8 @@ const ScrollSpy = ({
   // customize attributes
   useDataAttribute = "to-scrollspy-id",
   activeClass = "active-scroll-spy",
+
+  useBoxMethod = false,
 }: ScrollSpyProps) => {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const [navContainerItems, setNavContainerItems] = useState<NodeListOf<Element> | undefined>(); // prettier-ignore
@@ -81,6 +84,34 @@ const ScrollSpy = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navContainerItems]);
 
+  const isVisible = (el: HTMLElement) => {
+    if (useBoxMethod) {
+      var rectInView = el.getBoundingClientRect();
+
+      const hitbox_top = window.innerHeight;
+      const element_top = rectInView.top;
+      const element_bottom = rectInView.top + window.innerHeight;
+
+      return hitbox_top < element_bottom && hitbox_top > element_top;
+    } else {
+      const rectInView = el.getBoundingClientRect();
+
+      // this decides how much of the element should be visible
+      const leniency = parentScrollContainerRef?.current
+        ? parentScrollContainerRef?.current.offsetHeight * 0.5
+        : window.innerHeight * 0.5;
+
+      const useHeight = parentScrollContainerRef?.current
+        ? parentScrollContainerRef?.current.offsetHeight
+        : window.innerHeight;
+
+      return (
+        rectInView.top + leniency + offsetTop >= 0 &&
+        rectInView.bottom - leniency - offsetBottom <= useHeight
+      );
+    }
+  };
+
   const checkAndUpdateActiveScrollSpy = () => {
     const scrollParentContainer = scrollContainerRef.current;
 
@@ -92,14 +123,7 @@ const ScrollSpy = ({
       // get child element
       const useChild = scrollParentContainer.children.item(i) as HTMLDivElement;
 
-      const elementIsVisible = parentScrollContainerRef
-        ? isVisible(
-            useChild,
-            offsetTop,
-            offsetBottom,
-            parentScrollContainerRef?.current
-          )
-        : isVisible(useChild, offsetTop, offsetBottom);
+      const elementIsVisible = isVisible(useChild);
 
       // check if the element is in the viewport
       if (elementIsVisible) {