Skip to content

Commit 559dc3d

Browse files
committed
✨ NEW: onUpdateCallback prop (dev only)
1 parent 8f96bcf commit 559dc3d

File tree

3 files changed

+20
-6
lines changed

3 files changed

+20
-6
lines changed

README.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,12 @@ import ScrollSpy from "react-ui-scrollspy";
6868

6969
## 💡 Props
7070

71-
| Attributes | Type | Description | Default | Required |
72-
| :---------------- | :----------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- | :------ | :------- |
73-
| `scrollThrottle` | `number` | in `milliseconds` to throttle the `onscroll` event. Lower the number, better the response, higher the performance cost | 300 | no |
74-
| `children` | `ReactNode` | - | - | yes |
75-
| `navContainerRef` | `MutableRefObject<HTMLDivElement \| null>` | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes | - | no |
71+
| Attributes | Type | Description | Default | Required |
72+
| :----------------- | :----------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- | :------ | :------- |
73+
| `scrollThrottle` | `number` | in `milliseconds` to throttle the `onscroll` event. Lower the number, better the response, higher the performance cost | 300 | no |
74+
| `children` | `ReactNode` | - | - | yes |
75+
| `navContainerRef` | `MutableRefObject<HTMLDivElement \| null>` | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes | - | no |
76+
| `onUpdateCallback` | `(id: string) => void` | Executes this function whenever you scroll to an `Element`, callback returns the `id` of that `Element` as well | - | no |
7677

7778
## 📝 Authors
7879

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ interface ScrollSpyProps {
1313
children: ReactNode;
1414
navContainerRef?: MutableRefObject<HTMLDivElement | null>;
1515
scrollThrottle?: number;
16+
onUpdateCallback?: (id: string) => void;
1617
}
1718

1819
const ScrollSpy = ({
1920
children,
2021
navContainerRef,
22+
onUpdateCallback,
2123
scrollThrottle = 300,
2224
}: ScrollSpyProps) => {
2325
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -85,7 +87,10 @@ const ScrollSpy = ({
8587
) {
8688
el.classList.add("active-scroll-spy");
8789

88-
console.log("update to", changeHighlightedItemId);
90+
if (onUpdateCallback) {
91+
onUpdateCallback(changeHighlightedItemId);
92+
}
93+
8994
prevIdTracker.current = changeHighlightedItemId;
9095
window.history.pushState({}, "", `#${changeHighlightedItemId}`);
9196
}

dev.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,11 @@ npm link
88
cd demo-app
99
npm link react-ui-scrollspy
1010
```
11+
12+
- [ ] callbacks
13+
- [ ] on scroll top and onscrollbottom fix
14+
- [ ] deploy test website on github pages
15+
- [ ] offset props
16+
- [ ] customise data attributes
17+
- [ ] description, keywords
18+
- [ ] changelog

0 commit comments

Comments
 (0)