@leejaehyeok/use-intersection-observer 0.1.0 → 0.3.0

package/README.md

@@ -21,7 +21,7 @@ import React, { useRef } from "react";
 import { useIntersectionObserver } from "@leejaehyeok/use-intersection-observer";
 
 export function MyComponent() {
-  const { setContainerRef, isVisible, hasEntered } = useIntersectionObserver({
+  const { setContainerRef, isVisible, hasEntered, target } = useIntersectionObserver({
     targetSelector: "[data-target]",
     onEntered: (entry) => console.log("Entered!"),
     onExited: (entry) => console.log("Exited!"),
@@ -30,6 +30,9 @@ export function MyComponent() {
   return (
     <div ref={setContainerRef}>
       <div data-target>{isVisible ? "Visible" : "Hidden"}</div>
+      <button onClick={() => target?.scrollIntoView({ behavior: "smooth" })} disabled={!target}>
+        Scroll to target
+      </button>
     </div>
   );
 }
@@ -66,6 +69,7 @@ export function MyComponent() {
 - **Single & Multiple Elements:** Track one or many elements with dedicated hooks.
 - **Lifecycle Callbacks:** `onEntered`, `onExited`, and `onChange` callbacks for full control.
 - **State Tracking:** Know if elements are visible or have been entered.
+- **Target Element Access:** Get a direct reference to the observed DOM element via `target`.
 - **Once Option:** Auto-unobserve after first intersection with `once: true`.
 - **Flexible Root:** Use the viewport or a scrollable container as the intersection root.
 - **Reset Control:** Reset observation state programmatically with `reset()` method.

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`);function t(t){let n=(0,e.useRef)(t);return(0,e.useLayoutEffect)(()=>{n.current=t},[t]),n}function n(n){let{root:r=null,once:i=!1,targetSelector:a=`[data-intersection-target]`,onEntered:o,onExited:s,onChange:c,...l}=n||{},[u,d]=(0,e.useState)(()=>({isVisible:!1,hasEntered:!1})),f=(0,e.useRef)(i),p=(0,e.useRef)(r),m=(0,e.useRef)(null),h=(0,e.useRef)(null),g=(0,e.useRef)(null),_=(0,e.useRef)(!1),v=t(o),y=t(s),b=t(c),x=(0,e.useCallback)(()=>{g.current?.disconnect()},[]),S=(0,e.useCallback)(()=>{if(!h.current||!m.current){console.warn(`[use-intersection-observer] 관찰할 요소가 없습니다. reset이 실패했습니다.`);return}g.current?.unobserve(m.current),_.current=!1,d(()=>({isVisible:!1,hasEntered:!1})),g.current?.observe(m.current)},[]),C=(0,e.useCallback)((e,t)=>{let n=e[0],r=n.isIntersecting;m.current=n.target,b.current?.(r?`enter`:`exit`,n,t),r?(_.current||=f.current,v.current?.(n,t),d(()=>({isVisible:r,hasEntered:!0}))):(y.current?.(n,t),d(e=>({...e,isVisible:r})),_.current&&t.unobserve(n.target))},[]);return{setContainerRef:(0,e.useCallback)(e=>{if(!e){h.current=null,x();return}h.current=e;let t=p.current===`container`?e:null,n=e.querySelectorAll(a),r=n.length>0?n:e.firstElementChild;if(!r){console.warn(`[use-intersection-observer] 대상을 찾을 수 없습니다: "${a}"`);return}r instanceof NodeList&&r.length>1&&console.warn(`여러 개의 요소가 발견되었습니다. 첫 번째 요소만 추적합니다.`);let i=new IntersectionObserver(C,{...l,root:t}),o=r instanceof NodeList?r[0]:r;g.current=i,i.observe(o)},[C]),reset:S,...u}}function r(n){let{root:r=null,once:i=!1,keyAttribute:a=`data-intersection-key`,onEntered:o,onExited:s,onChange:c,...l}=n||{},[u,d]=(0,e.useState)(()=>({})),f=(0,e.useRef)(i),p=(0,e.useRef)(r),m=(0,e.useRef)(null),h=(0,e.useRef)(null),g=(0,e.useRef)(null),_=(0,e.useRef)({}),v=t(o),y=t(s),b=t(c),x=(0,e.useCallback)(()=>{h.current?.disconnect(),g.current?.disconnect()},[]),S=(0,e.useCallback)(e=>{if(!m.current){console.warn(`[use-intersection-observer-group] 컨테이너가 없습니다. reset이 실패했습니다.`);return}if(e){let t=m.current.querySelector(`[${a}="${e}"]`);t instanceof Element&&(h.current?.unobserve(t),_.current[e]=!1,d(t=>({...t,[e]:{isVisible:!1,hasEntered:!1}})),h.current?.observe(t))}else{h.current?.disconnect(),_.current={},d(()=>({}));let e=m.current.querySelectorAll(`[${a}]`),t=p.current===`container`?m.current:null,n=new IntersectionObserver(w,{...l,root:t});h.current=n,e.forEach(e=>{n.observe(e)})}},[]),C=(0,e.useCallback)(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e instanceof Element&&[...e.hasAttribute(a)?[e]:[],...Array.from(e.querySelectorAll(`[${a}]`))].forEach(e=>{h.current?.observe(e)})}),e.removedNodes.forEach(e=>{e instanceof Element&&[...e.hasAttribute(a)?[e]:[],...Array.from(e.querySelectorAll(`[${a}]`))].forEach(e=>{let t=e.getAttribute(a);t&&(h.current?.unobserve(e),delete _.current[t],d(e=>{let n={...e};return delete n[t],n}))})})})},[]),w=(0,e.useCallback)((e,t)=>{d(n=>{let r={...n};return e.forEach(e=>{let i=e.target.getAttribute(a);if(!i){console.warn(`[use-intersection-observer-group] ${a} 속성이 없습니다.`);return}let o=e.isIntersecting,s=n[i];b.current?.(i,o?`enter`:`exit`,e,t),o?(_.current[i]||=f.current,v.current?.(i,e,t),r[i]={isVisible:o,hasEntered:!0}):(y.current?.(i,e,t),r[i]={isVisible:o,hasEntered:s?.hasEntered??!1},_.current[i]&&t.unobserve(e.target))}),r})},[]);return{setContainerRef:(0,e.useCallback)(e=>{if(!e){m.current=null,x();return}m.current=e;let t=p.current===`container`?e:null,n=e.querySelectorAll(`[${a}]`),r=new IntersectionObserver(w,{...l,root:t});h.current=r;let i=new MutationObserver(C);i.observe(e,{childList:!0,subtree:!0}),g.current=i,n.length!==0&&n.forEach(e=>{r.observe(e)})},[w]),reset:S,states:u}}exports.useIntersectionObserver=n,exports.useIntersectionObserverGroup=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`);function t(t){let n=(0,e.useRef)(t);return(0,e.useLayoutEffect)(()=>{n.current=t},[t]),n}function n(n){let{root:r=null,once:i=!1,targetSelector:a=`[data-intersection-target]`,onEntered:o,onExited:s,onChange:c,enable:l=!0,...u}=n||{},[d,f]=(0,e.useState)(()=>({isVisible:!1,hasEntered:!1,target:null})),p=(0,e.useRef)(i),m=(0,e.useRef)(r),h=(0,e.useRef)(null),g=(0,e.useRef)(null),_=(0,e.useRef)(null),v=(0,e.useRef)(!1),y=t(l),b=t(o),x=t(s),S=t(c),C=(0,e.useCallback)(()=>{_.current?.disconnect()},[]),w=(0,e.useCallback)(()=>{if(!g.current||!h.current){console.warn(`[use-intersection-observer] 관찰할 요소가 없습니다. reset이 실패했습니다.`);return}_.current?.unobserve(h.current),v.current=!1,f(()=>({isVisible:!1,hasEntered:!1,target:null})),_.current?.observe(h.current)},[]),T=(0,e.useCallback)((e,t)=>{if(!y.current)return;let n=e[0],r=n.isIntersecting;h.current=n.target,S.current?.(r?`enter`:`exit`,n,t),r?(v.current||=p.current,b.current?.(n,t),f(()=>({isVisible:r,hasEntered:!0,target:n.target}))):(x.current?.(n,t),f(e=>({...e,isVisible:r})),v.current&&t.unobserve(n.target))},[]);return{setContainerRef:(0,e.useCallback)(e=>{if(!e){g.current=null,C();return}g.current=e;let t=m.current===`container`?e:null,n=e.querySelectorAll(a),r=n.length>0?n:e.firstElementChild;if(!r){console.warn(`[use-intersection-observer] 대상을 찾을 수 없습니다: "${a}"`);return}r instanceof NodeList&&r.length>1&&console.warn(`여러 개의 요소가 발견되었습니다. 첫 번째 요소만 추적합니다.`);let i=new IntersectionObserver(T,{...u,root:t}),o=r instanceof NodeList?r[0]:r;_.current=i,i.observe(o)},[T]),reset:w,...d}}function r(n){let{root:r=null,once:i=!1,keyAttribute:a=`data-intersection-key`,onEntered:o,onExited:s,onChange:c,enable:l=!0,...u}=n||{},[d,f]=(0,e.useState)(()=>({})),p=(0,e.useRef)(i),m=(0,e.useRef)(r),h=(0,e.useRef)(null),g=(0,e.useRef)(null),_=(0,e.useRef)(null),v=(0,e.useRef)({}),y=t(l),b=t(o),x=t(s),S=t(c),C=(0,e.useCallback)(()=>{g.current?.disconnect(),_.current?.disconnect()},[]),w=(0,e.useCallback)(e=>{if(!h.current){console.warn(`[use-intersection-observer-group] 컨테이너가 없습니다. reset이 실패했습니다.`);return}if(e){let t=h.current.querySelector(`[${a}="${e}"]`);t instanceof Element&&(g.current?.unobserve(t),v.current[e]=!1,f(t=>({...t,[e]:{isVisible:!1,hasEntered:!1,target:null}})),g.current?.observe(t))}else{g.current?.disconnect(),v.current={},f(()=>({}));let e=h.current.querySelectorAll(`[${a}]`),t=m.current===`container`?h.current:null,n=new IntersectionObserver(E,{...u,root:t});g.current=n,e.forEach(e=>{n.observe(e)})}},[]),T=(0,e.useCallback)(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e instanceof Element&&[...e.hasAttribute(a)?[e]:[],...Array.from(e.querySelectorAll(`[${a}]`))].forEach(e=>{g.current?.observe(e)})}),e.removedNodes.forEach(e=>{e instanceof Element&&[...e.hasAttribute(a)?[e]:[],...Array.from(e.querySelectorAll(`[${a}]`))].forEach(e=>{let t=e.getAttribute(a);t&&(g.current?.unobserve(e),delete v.current[t],f(e=>{let n={...e};return delete n[t],n}))})})})},[]),E=(0,e.useCallback)((e,t)=>{y.current&&f(n=>{let r={...n};return e.forEach(e=>{let i=e.target.getAttribute(a);if(!i){console.warn(`[use-intersection-observer-group] ${a} 속성이 없습니다.`);return}let o=e.isIntersecting,s=n[i];S.current?.(i,o?`enter`:`exit`,e,t),o?(v.current[i]||=p.current,b.current?.(i,e,t),r[i]={isVisible:o,hasEntered:!0,target:e.target}):(x.current?.(i,e,t),r[i]={isVisible:o,hasEntered:s?.hasEntered??!1,target:e.target},v.current[i]&&t.unobserve(e.target))}),r})},[]);return{setContainerRef:(0,e.useCallback)(e=>{if(!e){h.current=null,C();return}h.current=e;let t=m.current===`container`?e:null,n=e.querySelectorAll(`[${a}]`),r=new IntersectionObserver(E,{...u,root:t});g.current=r;let i=new MutationObserver(T);i.observe(e,{childList:!0,subtree:!0}),_.current=i,n.length!==0&&n.forEach(e=>{r.observe(e)})},[E]),reset:w,states:d}}exports.useIntersectionObserver=n,exports.useIntersectionObserverGroup=r;

package/dist/index.js

@@ -9,100 +9,105 @@ function i(e) {
 //#endregion
 //#region src/useIntersectionObserver.ts
 function a(t) {
-	let { root: a = null, once: o = !1, targetSelector: s = "[data-intersection-target]", onEntered: c, onExited: l, onChange: u, ...d } = t || {}, [f, p] = r(() => ({
+	let { root: a = null, once: o = !1, targetSelector: s = "[data-intersection-target]", onEntered: c, onExited: l, onChange: u, enable: d = !0, ...f } = t || {}, [p, m] = r(() => ({
 		isVisible: !1,
-		hasEntered: !1
-	})), m = n(o), h = n(a), g = n(null), _ = n(null), v = n(null), y = n(!1), b = i(c), x = i(l), S = i(u), C = e(() => {
-		v.current?.disconnect();
-	}, []), w = e(() => {
-		if (!_.current || !g.current) {
+		hasEntered: !1,
+		target: null
+	})), h = n(o), g = n(a), _ = n(null), v = n(null), y = n(null), b = n(!1), x = i(d), S = i(c), C = i(l), w = i(u), T = e(() => {
+		y.current?.disconnect();
+	}, []), E = e(() => {
+		if (!v.current || !_.current) {
 			console.warn("[use-intersection-observer] 관찰할 요소가 없습니다. reset이 실패했습니다.");
 			return;
 		}
-		v.current?.unobserve(g.current), y.current = !1, p(() => ({
+		y.current?.unobserve(_.current), b.current = !1, m(() => ({
 			isVisible: !1,
-			hasEntered: !1
-		})), v.current?.observe(g.current);
-	}, []), T = e((e, t) => {
+			hasEntered: !1,
+			target: null
+		})), y.current?.observe(_.current);
+	}, []), D = e((e, t) => {
+		if (!x.current) return;
 		let n = e[0], r = n.isIntersecting;
-		g.current = n.target, S.current?.(r ? "enter" : "exit", n, t), r ? (y.current ||= m.current, b.current?.(n, t), p(() => ({
+		_.current = n.target, w.current?.(r ? "enter" : "exit", n, t), r ? (b.current ||= h.current, S.current?.(n, t), m(() => ({
 			isVisible: r,
-			hasEntered: !0
-		}))) : (x.current?.(n, t), p((e) => ({
+			hasEntered: !0,
+			target: n.target
+		}))) : (C.current?.(n, t), m((e) => ({
 			...e,
 			isVisible: r
-		})), y.current && t.unobserve(n.target));
+		})), b.current && t.unobserve(n.target));
 	}, []);
 	return {
 		setContainerRef: e((e) => {
 			if (!e) {
-				_.current = null, C();
+				v.current = null, T();
 				return;
 			}
-			_.current = e;
-			let t = h.current === "container" ? e : null, n = e.querySelectorAll(s), r = n.length > 0 ? n : e.firstElementChild;
+			v.current = e;
+			let t = g.current === "container" ? e : null, n = e.querySelectorAll(s), r = n.length > 0 ? n : e.firstElementChild;
 			if (!r) {
 				console.warn(`[use-intersection-observer] 대상을 찾을 수 없습니다: "${s}"`);
 				return;
 			}
 			r instanceof NodeList && r.length > 1 && console.warn("여러 개의 요소가 발견되었습니다. 첫 번째 요소만 추적합니다.");
-			let i = new IntersectionObserver(T, {
-				...d,
+			let i = new IntersectionObserver(D, {
+				...f,
 				root: t
 			}), a = r instanceof NodeList ? r[0] : r;
-			v.current = i, i.observe(a);
-		}, [T]),
-		reset: w,
-		...f
+			y.current = i, i.observe(a);
+		}, [D]),
+		reset: E,
+		...p
 	};
 }
 //#endregion
 //#region src/useIntersectionObserverGroup.ts
 function o(t) {
-	let { root: a = null, once: o = !1, keyAttribute: s = "data-intersection-key", onEntered: c, onExited: l, onChange: u, ...d } = t || {}, [f, p] = r(() => ({})), m = n(o), h = n(a), g = n(null), _ = n(null), v = n(null), y = n({}), b = i(c), x = i(l), S = i(u), C = e(() => {
-		_.current?.disconnect(), v.current?.disconnect();
-	}, []), w = e((e) => {
-		if (!g.current) {
+	let { root: a = null, once: o = !1, keyAttribute: s = "data-intersection-key", onEntered: c, onExited: l, onChange: u, enable: d = !0, ...f } = t || {}, [p, m] = r(() => ({})), h = n(o), g = n(a), _ = n(null), v = n(null), y = n(null), b = n({}), x = i(d), S = i(c), C = i(l), w = i(u), T = e(() => {
+		v.current?.disconnect(), y.current?.disconnect();
+	}, []), E = e((e) => {
+		if (!_.current) {
 			console.warn("[use-intersection-observer-group] 컨테이너가 없습니다. reset이 실패했습니다.");
 			return;
 		}
 		if (e) {
-			let t = g.current.querySelector(`[${s}="${e}"]`);
-			t instanceof Element && (_.current?.unobserve(t), y.current[e] = !1, p((t) => ({
+			let t = _.current.querySelector(`[${s}="${e}"]`);
+			t instanceof Element && (v.current?.unobserve(t), b.current[e] = !1, m((t) => ({
 				...t,
 				[e]: {
 					isVisible: !1,
-					hasEntered: !1
+					hasEntered: !1,
+					target: null
 				}
-			})), _.current?.observe(t));
+			})), v.current?.observe(t));
 		} else {
-			_.current?.disconnect(), y.current = {}, p(() => ({}));
-			let e = g.current.querySelectorAll(`[${s}]`), t = h.current === "container" ? g.current : null, n = new IntersectionObserver(E, {
-				...d,
+			v.current?.disconnect(), b.current = {}, m(() => ({}));
+			let e = _.current.querySelectorAll(`[${s}]`), t = g.current === "container" ? _.current : null, n = new IntersectionObserver(O, {
+				...f,
 				root: t
 			});
-			_.current = n, e.forEach((e) => {
+			v.current = n, e.forEach((e) => {
 				n.observe(e);
 			});
 		}
-	}, []), T = e((e) => {
+	}, []), D = e((e) => {
 		e.forEach((e) => {
 			e.addedNodes.forEach((e) => {
 				e instanceof Element && [...e.hasAttribute(s) ? [e] : [], ...Array.from(e.querySelectorAll(`[${s}]`))].forEach((e) => {
-					_.current?.observe(e);
+					v.current?.observe(e);
 				});
 			}), e.removedNodes.forEach((e) => {
 				e instanceof Element && [...e.hasAttribute(s) ? [e] : [], ...Array.from(e.querySelectorAll(`[${s}]`))].forEach((e) => {
 					let t = e.getAttribute(s);
-					t && (_.current?.unobserve(e), delete y.current[t], p((e) => {
+					t && (v.current?.unobserve(e), delete b.current[t], m((e) => {
 						let n = { ...e };
 						return delete n[t], n;
 					}));
 				});
 			});
 		});
-	}, []), E = e((e, t) => {
-		p((n) => {
+	}, []), O = e((e, t) => {
+		x.current && m((n) => {
 			let r = { ...n };
 			return e.forEach((e) => {
 				let i = e.target.getAttribute(s);
@@ -111,38 +116,40 @@ function o(t) {
 					return;
 				}
 				let a = e.isIntersecting, o = n[i];
-				S.current?.(i, a ? "enter" : "exit", e, t), a ? (y.current[i] ||= m.current, b.current?.(i, e, t), r[i] = {
+				w.current?.(i, a ? "enter" : "exit", e, t), a ? (b.current[i] ||= h.current, S.current?.(i, e, t), r[i] = {
 					isVisible: a,
-					hasEntered: !0
-				}) : (x.current?.(i, e, t), r[i] = {
+					hasEntered: !0,
+					target: e.target
+				}) : (C.current?.(i, e, t), r[i] = {
 					isVisible: a,
-					hasEntered: o?.hasEntered ?? !1
-				}, y.current[i] && t.unobserve(e.target));
+					hasEntered: o?.hasEntered ?? !1,
+					target: e.target
+				}, b.current[i] && t.unobserve(e.target));
 			}), r;
 		});
 	}, []);
 	return {
 		setContainerRef: e((e) => {
 			if (!e) {
-				g.current = null, C();
+				_.current = null, T();
 				return;
 			}
-			g.current = e;
-			let t = h.current === "container" ? e : null, n = e.querySelectorAll(`[${s}]`), r = new IntersectionObserver(E, {
-				...d,
+			_.current = e;
+			let t = g.current === "container" ? e : null, n = e.querySelectorAll(`[${s}]`), r = new IntersectionObserver(O, {
+				...f,
 				root: t
 			});
-			_.current = r;
-			let i = new MutationObserver(T);
+			v.current = r;
+			let i = new MutationObserver(D);
 			i.observe(e, {
 				childList: !0,
 				subtree: !0
-			}), v.current = i, n.length !== 0 && n.forEach((e) => {
+			}), y.current = i, n.length !== 0 && n.forEach((e) => {
 				r.observe(e);
 			});
-		}, [E]),
-		reset: w,
-		states: f
+		}, [O]),
+		reset: E,
+		states: p
 	};
 }
 //#endregion

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 export type IntersectionBaseOptions = {
     root?: "container" | null;
     once?: boolean;
+    enable?: boolean;
 } & Omit<IntersectionObserverInit, "root">;

package/dist/useIntersectionObserver.d.ts

@@ -9,6 +9,7 @@ type IntersectionObserverOption = IntersectionBaseOptions & {
 declare function useIntersectionObserver(options?: IntersectionObserverOption): {
     isVisible: boolean;
     hasEntered: boolean;
+    target: Element | null;
     setContainerRef: RefCallback<HTMLElement>;
     reset: () => void;
 };

package/dist/useIntersectionObserverGroup.d.ts

@@ -9,6 +9,7 @@ type IntersectionGroupOption = IntersectionBaseOptions & {
 type TargetState = {
     isVisible: boolean;
     hasEntered: boolean;
+    target: Element | null;
 };
 type GroupStates = Record<string, TargetState>;
 declare function useIntersectionObserverGroup(options?: IntersectionGroupOption): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leejaehyeok/use-intersection-observer",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React hooks for observing element visibility using the Intersection Observer API. Supports single element and multiple elements tracking with lifecycle callbacks.",
   "author": "leejh1316",
   "license": "MIT",