@ilokesto/utilinent 0.0.10 → 0.0.11
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/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ilokesto/utilinent",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build": "vite build && tsc --emitDeclarationOnly"
|
|
6
6
|
},
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "git+https://github.com/
|
|
9
|
+
"url": "git+https://github.com/ilokesto/utilinent.git"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"types": "dist/index.d.ts",
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef, useState } from "react";
|
|
3
|
-
import { Show } from "./Show";
|
|
4
|
-
export function IntersectionObserver({ children, fallback, threshold = 0, rootMargin = "0px", triggerOnce = false, onIntersect, }) {
|
|
5
|
-
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
6
|
-
const [hasTriggered, setHasTriggered] = useState(false);
|
|
7
|
-
const [entry, setEntry] = useState();
|
|
8
|
-
const elementRef = useRef(null);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
const element = elementRef.current;
|
|
11
|
-
// 요소가 없으면 관찰하지 않음
|
|
12
|
-
if (!element) {
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
15
|
-
// triggerOnce가 true이고 이미 트리거되었으면 관찰하지 않음
|
|
16
|
-
if (triggerOnce && hasTriggered) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
// IntersectionObserver가 지원되지 않는 브라우저에서는 항상 intersecting으로 처리
|
|
20
|
-
if (!window.IntersectionObserver) {
|
|
21
|
-
setIsIntersecting(true);
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
const observer = new window.IntersectionObserver((entries) => {
|
|
25
|
-
const [entry] = entries;
|
|
26
|
-
const isCurrentlyIntersecting = entry.isIntersecting;
|
|
27
|
-
setIsIntersecting(isCurrentlyIntersecting);
|
|
28
|
-
setEntry(entry);
|
|
29
|
-
// onIntersect 콜백 호출
|
|
30
|
-
if (onIntersect) {
|
|
31
|
-
onIntersect(isCurrentlyIntersecting, entry);
|
|
32
|
-
}
|
|
33
|
-
// triggerOnce가 true이고 교차가 시작되면 더 이상 관찰하지 않음
|
|
34
|
-
if (triggerOnce && isCurrentlyIntersecting) {
|
|
35
|
-
setHasTriggered(true);
|
|
36
|
-
observer.unobserve(element);
|
|
37
|
-
}
|
|
38
|
-
}, {
|
|
39
|
-
threshold,
|
|
40
|
-
rootMargin,
|
|
41
|
-
});
|
|
42
|
-
observer.observe(element);
|
|
43
|
-
// cleanup
|
|
44
|
-
return () => {
|
|
45
|
-
observer.unobserve(element);
|
|
46
|
-
};
|
|
47
|
-
}, [threshold, rootMargin, triggerOnce, hasTriggered, onIntersect]);
|
|
48
|
-
const content = typeof children === 'function'
|
|
49
|
-
? children(isIntersecting)
|
|
50
|
-
: children;
|
|
51
|
-
return (_jsx("div", { ref: elementRef, style:
|
|
52
|
-
// fallback이 없고 isIntersecting이 false인 경우
|
|
53
|
-
!fallback && !isIntersecting
|
|
54
|
-
? {
|
|
55
|
-
minHeight: '1px',
|
|
56
|
-
minWidth: '1px',
|
|
57
|
-
flexShrink: 0, // flex 컨테이너에서 축소되지 않도록
|
|
58
|
-
display: 'block' // inline 요소가 되지 않도록
|
|
59
|
-
}
|
|
60
|
-
: undefined, children: _jsx(Show, { when: isIntersecting, fallback: fallback, children: content }) }));
|
|
61
|
-
}
|