✨ NEW: onUpdateCallback prop (dev only)

Author: pettiboy

README.md

@@ -68,11 +68,12 @@ import ScrollSpy from "react-ui-scrollspy";
 
 ## 💡 Props
 
-| 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       |
-| `children`        | `ReactNode`                                | -                                                                                                                      | -       | yes      |
-| `navContainerRef` | `MutableRefObject<HTMLDivElement \| null>` | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes                             | -       | no       |
+| 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       |
+| `children`         | `ReactNode`                                | -                                                                                                                      | -       | yes      |
+| `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       |
 
 ## 📝 Authors
 

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

@@ -13,11 +13,13 @@ interface ScrollSpyProps {
   children: ReactNode;
   navContainerRef?: MutableRefObject<HTMLDivElement | null>;
   scrollThrottle?: number;
+  onUpdateCallback?: (id: string) => void;
 }
 
 const ScrollSpy = ({
   children,
   navContainerRef,
+  onUpdateCallback,
   scrollThrottle = 300,
 }: ScrollSpyProps) => {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -85,7 +87,10 @@ const ScrollSpy = ({
           ) {
             el.classList.add("active-scroll-spy");
 
-            console.log("update to", changeHighlightedItemId);
+            if (onUpdateCallback) {
+              onUpdateCallback(changeHighlightedItemId);
+            }
+
             prevIdTracker.current = changeHighlightedItemId;
             window.history.pushState({}, "", `#${changeHighlightedItemId}`);
           }

dev.md

@@ -8,3 +8,11 @@ npm link
 cd demo-app
 npm link react-ui-scrollspy
 ```
+
+- [ ] callbacks
+- [ ] on scroll top and onscrollbottom fix
+- [ ] deploy test website on github pages
+- [ ] offset props
+- [ ] customise data attributes
+- [ ] description, keywords
+- [ ] changelog