domet 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/{useDomet.d.ts → cjs/index.d.ts} +14 -12
- package/dist/{useScrowl.js → cjs/index.js} +196 -177
- package/dist/{useScrowl.d.ts → es/index.d.mts} +14 -12
- package/dist/{useDomet.js → es/index.mjs} +167 -154
- package/package.json +20 -15
- package/LICENSE +0 -21
- package/dist/index.d.ts +0 -3
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -1
- package/dist/useDomet.d.ts.map +0 -1
- package/dist/useScrowl.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# domet ・ /ˈdɔ.met/
|
|
2
2
|
|
|
3
|
-
domet is a lightweight
|
|
3
|
+
domet is a lightweight React hook built for scroll-driven interfaces. Use it for classic scroll-spy, but also for progress indicators, lazy section loading, or any UI that needs reliable section awareness.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Lightweight under the hood: a tight scroll loop and hysteresis for stable, flicker-free section tracking.
|
|
6
6
|
|
|
7
7
|
For the source code, check out the [GitHub](https://github.com/blksmr/domet).
|
|
8
8
|
|
|
9
|
-
## Installation
|
|
9
|
+
## Installation ++Requires React 18 or higher++
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
12
|
npm install domet
|
|
@@ -184,4 +184,6 @@ The name **domet** comes from Bosnian/Serbian/Croatian and means "reach" or "ran
|
|
|
184
184
|
|
|
185
185
|
For issues or feature requests, open an issue on [GitHub](https://github.com/blksmr/domet).
|
|
186
186
|
|
|
187
|
+
For LLMs, the full documentation is available at [/llms.txt](/llms.txt).
|
|
188
|
+
|
|
187
189
|
You can also reach out to me on [Twitter](https://x.com/blkasmir).
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
type SectionBounds = {
|
|
3
4
|
top: number;
|
|
4
5
|
bottom: number;
|
|
5
6
|
height: number;
|
|
6
7
|
};
|
|
7
|
-
|
|
8
|
+
type ScrollState = {
|
|
8
9
|
y: number;
|
|
9
10
|
progress: number;
|
|
10
11
|
direction: "up" | "down" | null;
|
|
@@ -14,15 +15,15 @@ export type ScrollState = {
|
|
|
14
15
|
viewportHeight: number;
|
|
15
16
|
offset: number;
|
|
16
17
|
};
|
|
17
|
-
|
|
18
|
+
type SectionState = {
|
|
18
19
|
bounds: SectionBounds;
|
|
19
20
|
visibility: number;
|
|
20
21
|
progress: number;
|
|
21
22
|
isInViewport: boolean;
|
|
22
23
|
isActive: boolean;
|
|
23
24
|
};
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
type ScrollBehavior = "smooth" | "instant" | "auto";
|
|
26
|
+
type DometOptions = {
|
|
26
27
|
offset?: number;
|
|
27
28
|
offsetRatio?: number;
|
|
28
29
|
debounceMs?: number;
|
|
@@ -35,17 +36,17 @@ export type DometOptions = {
|
|
|
35
36
|
onScrollStart?: () => void;
|
|
36
37
|
onScrollEnd?: () => void;
|
|
37
38
|
};
|
|
38
|
-
|
|
39
|
+
type SectionProps = {
|
|
39
40
|
id: string;
|
|
40
41
|
ref: (el: HTMLElement | null) => void;
|
|
41
42
|
"data-domet": string;
|
|
42
43
|
};
|
|
43
|
-
|
|
44
|
+
type NavProps = {
|
|
44
45
|
onClick: () => void;
|
|
45
46
|
"aria-current": "page" | undefined;
|
|
46
47
|
"data-active": boolean;
|
|
47
48
|
};
|
|
48
|
-
|
|
49
|
+
type UseDometReturn = {
|
|
49
50
|
activeId: string | null;
|
|
50
51
|
activeIndex: number;
|
|
51
52
|
scroll: ScrollState;
|
|
@@ -55,6 +56,7 @@ export type UseDometReturn = {
|
|
|
55
56
|
sectionProps: (id: string) => SectionProps;
|
|
56
57
|
navProps: (id: string) => NavProps;
|
|
57
58
|
};
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
declare function useDomet(sectionIds: string[], containerRef?: RefObject<HTMLElement> | null, options?: DometOptions): UseDometReturn;
|
|
60
|
+
|
|
61
|
+
export { useDomet as default, useDomet };
|
|
62
|
+
export type { DometOptions, NavProps, ScrollBehavior, ScrollState, SectionBounds, SectionProps, SectionState, UseDometReturn };
|