✨ NEW: customizable data attributes and active class

Author: pettiboy

README.md

@@ -24,7 +24,7 @@ OR
 yarn add react-ui-scrollspy
 ```
 
-## ⚙️ Getting started
+## ⚙️ Usage
 
 1. In your navigation component
 
@@ -68,15 +68,44 @@ import ScrollSpy from "react-ui-scrollspy";
 
 ## 💡 Props
 
-| Attributes                 | Type                                       | Description                                                                                                            | Default | Required |
-| :------------------------- | :----------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- | :------ | :------- |
-| `children`                 | `ReactNode`                                | Each direct child `Element` should contain an `id`                                                                     | -       | yes      |
-| `scrollThrottle`           | `number`                                   | in `milliseconds` to throttle the `onscroll` event. Lower the number, better the response, higher the performance cost | 300     | no       |
-| `navContainerRef`          | `MutableRefObject<HTMLDivElement \| null>` | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes                             | -       | no       |
-| `onUpdateCallback`         | `(id: string) => void`                     | Executes this function whenever you scroll to an `Element`, callback returns the `id` of that `Element` as well        | -       | no       |
-| `parentScrollContainerRef` | `MutableRefObject<HTMLDivElement \| null>` | If you want to spy only on a particular scrollable `container (Element)` then pass a ref of the same to this prop      | -       | no       |
-| `offsetTop`                | `number`                                   | spy will be fired when it has been scrolled `offsetTop` beyond `50%` to the top of the containing element              | 0       | no       |
-| `offsetBottom`             | `number`                                   | spy will be fired when it has been scrolled `offsetBottom` beyond `50%` to the bottom of the containing element        | 0       | no       |
+### Children
+
+| Attributes | Type        | Description                                        | Default | Required |
+| :--------- | :---------- | :------------------------------------------------- | :------ | :------- |
+| `children` | `ReactNode` | Each direct child `Element` should contain an `id` | -       | yes      |
+
+### Refs
+
+| Attributes                 | Type                                              | Description                                                                                                       | Default | Required |
+| :------------------------- | :------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------- | :------ | :------- |
+| `navContainerRef`          | MutableRefObject<br><HTMLDivElement \| null><br/> | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes                        | -       | no       |
+| `parentScrollContainerRef` | MutableRefObject<br><HTMLDivElement \| null><br/> | If you want to spy only on a particular scrollable `container (Element)` then pass a ref of the same to this prop | -       | no       |
+
+### Throlle
+
+| Attributes       | Type     | Description                                                                                                            | Default | Required |
+| :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------------- | :------ | :------- |
+| `scrollThrottle` | `number` | In `milliseconds` to throttle the `onscroll` event. Lower the number, better the response, higher the performance cost | `300`   | no       |
+
+### Callback
+
+| Attributes         | Type                   | Description                                                                                                     | Default | Required |
+| :----------------- | :--------------------- | :-------------------------------------------------------------------------------------------------------------- | :------ | :------- |
+| `onUpdateCallback` | `(id: string) => void` | Executes this function whenever you scroll to an `Element`, callback returns the `id` of that `Element` as well | -       | no       |
+
+### Offsets
+
+| Attributes     | Type     | Description                                                                                                     | Default | Required |
+| :------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | :------ | :------- |
+| `offsetTop`    | `number` | Spy will be fired when it has been scrolled `offsetTop` beyond `50%` to the top of the containing element       | `0`     | no       |
+| `offsetBottom` | `number` | Spy will be fired when it has been scrolled `offsetBottom` beyond `50%` to the bottom of the containing element | `0`     | no       |
+
+### Customize Attributes
+
+| Attributes         | Type     | Description                                                  | Default               | Required |
+| :----------------- | :------- | :----------------------------------------------------------- | :-------------------- | :------- |
+| `useDataAttribute` | `string` | To customize the string after `data-`                        | `"to-scrollspy-id"`   | no       |
+| `activeClass`      | `string` | To customize the `class` added when the `Element` is in view | `"active-scroll-spy"` | no       |
 
 ## 📝 Authors
 

demo-app/src/App.tsx

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

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

@@ -11,22 +11,46 @@ import { throttle } from "../utils/throttle";
 
 interface ScrollSpyProps {
   children: ReactNode;
+
+  // refs
   navContainerRef?: MutableRefObject<HTMLDivElement | null>;
   parentScrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
+
+  // throttle
   scrollThrottle?: number;
+
+  // callback
   onUpdateCallback?: (id: string) => void;
+
+  // offsets
   offsetTop?: number;
   offsetBottom?: number;
+
+  // customize attributes
+  useDataAttribute?: string;
+  activeClass?: string;
 }
 
 const ScrollSpy = ({
   children,
+
+  // refs
   navContainerRef,
   parentScrollContainerRef,
-  onUpdateCallback,
+
+  // throttle
   scrollThrottle = 300,
+
+  // callback
+  onUpdateCallback,
+
+  // offsets
   offsetTop = 0,
   offsetBottom = 0,
+
+  // customize attributes
+  useDataAttribute = "to-scrollspy-id",
+  activeClass = "active-scroll-spy",
 }: ScrollSpyProps) => {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const [navContainerItems, setNavContainerItems] = useState<NodeListOf<Element> | undefined>(); // prettier-ignore
@@ -37,13 +61,15 @@ const ScrollSpy = ({
 
   // 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]"));
-    }
+    navContainerRef
+      ? setNavContainerItems(
+          navContainerRef.current?.querySelectorAll(
+            `[data-${useDataAttribute}]`
+          )
+        )
+      : setNavContainerItems(
+          document.querySelectorAll(`[data-${useDataAttribute}]`)
+        );
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navContainerRef]);
@@ -85,20 +111,20 @@ const ScrollSpy = ({
 
         // now loop over each element in the nav Container
         navContainerItems.forEach((el) => {
-          const attrId = el.getAttribute("data-to-scrollspy-id");
+          const attrId = el.getAttribute(`data-${useDataAttribute}`);
 
           // if the element contains 'active' the class remove it
-          if (el.classList.contains("active-scroll-spy")) {
-            el.classList.remove("active-scroll-spy");
+          if (el.classList.contains(activeClass)) {
+            el.classList.remove(activeClass);
           }
 
           // 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.contains(activeClass)
           ) {
-            el.classList.add("active-scroll-spy");
+            el.classList.add(activeClass);
 
             if (onUpdateCallback) {
               onUpdateCallback(changeHighlightedItemId);

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

@@ -1,5 +1,3 @@
-import { MutableRefObject } from "react";
-
 // to check if the element is in viewport
 export const isVisible = (
   el: HTMLElement,

dev.md

@@ -26,8 +26,8 @@ git commit -m "‼️ BREAKING: "
 - [x] callbacks
 - [x] offset props
 - [x] relative positioning handled
-- [ ] customise data attributes
-- [ ] description, keywords
+- [x] customise data attributes
+- [x] description, keywords
 - [ ] deploy test website on github pages
 - [x] update docs
 - [ ] deploy as version 2

dist/ScrollSpy/ScrollSpy.d.ts

@@ -2,7 +2,13 @@ import { MutableRefObject, ReactNode } from "react";
 interface ScrollSpyProps {
     children: ReactNode;
     navContainerRef?: MutableRefObject<HTMLDivElement | null>;
+    parentScrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
     scrollThrottle?: number;
+    onUpdateCallback?: (id: string) => void;
+    offsetTop?: number;
+    offsetBottom?: number;
+    useDataAttribute?: string;
+    activeClass?: string;
 }
-declare const ScrollSpy: ({ children, navContainerRef, scrollThrottle, }: ScrollSpyProps) => JSX.Element;
+declare const ScrollSpy: ({ children, navContainerRef, parentScrollContainerRef, scrollThrottle, onUpdateCallback, offsetTop, offsetBottom, useDataAttribute, activeClass, }: ScrollSpyProps) => JSX.Element;
 export default ScrollSpy;