drop element argument

Author: jantimon

src/__tests__/useOnInViewChanged.test.tsx

@@ -15,14 +15,14 @@ const OnInViewChangedComponent = ({
   const [callCount, setCallCount] = React.useState(0);
   const [cleanupCount, setCleanupCount] = React.useState(0);
 
-  const inViewRef = useOnInViewChanged((element, entry) => {
+  const inViewRef = useOnInViewChanged((entry) => {
     setInView(entry ? entry.isIntersecting : false);
     setCallCount((prev) => prev + 1);
 
     // Return cleanup function
-    return (entry) => {
+    return (cleanupEntry) => {
       setCleanupCount((prev) => prev + 1);
-      if (entry) {
+      if (cleanupEntry) {
         setInView(false);
       }
     };
@@ -53,7 +53,7 @@ const LazyOnInViewChangedComponent = ({
     setIsLoading(false);
   }, []);
 
-  const inViewRef = useOnInViewChanged((element, entry) => {
+  const inViewRef = useOnInViewChanged((entry) => {
     setInView(entry ? entry.isIntersecting : false);
     return () => setInView(false);
   }, options);
@@ -232,7 +232,7 @@ const MergeRefsComponent = ({
 }: { options?: IntersectionListenerOptions }) => {
   const [inView, setInView] = React.useState(false);
 
-  const inViewRef = useOnInViewChanged((element, entry) => {
+  const inViewRef = useOnInViewChanged((entry) => {
     setInView(entry ? entry.isIntersecting : false);
     return () => setInView(false);
   }, options);
@@ -263,17 +263,17 @@ const MultipleCallbacksComponent = ({
   const [inView2, setInView2] = React.useState(false);
   const [inView3, setInView3] = React.useState(false);
 
-  const ref1 = useOnInViewChanged((element, entry) => {
+  const ref1 = useOnInViewChanged((entry) => {
     setInView1(entry ? entry.isIntersecting : false);
     return () => setInView1(false);
   }, options);
 
-  const ref2 = useOnInViewChanged((element, entry) => {
+  const ref2 = useOnInViewChanged((entry) => {
     setInView2(entry ? entry.isIntersecting : false);
     return () => setInView2(false);
   }, options);
 
-  const ref3 = useOnInViewChanged((element, entry) => {
+  const ref3 = useOnInViewChanged((entry) => {
     setInView3(entry ? entry.isIntersecting : false);
     return () => setInView3(false);
   });
@@ -316,8 +316,8 @@ test("should pass the element to the callback", () => {
   let capturedElement: Element | undefined;
 
   const ElementTestComponent = () => {
-    const inViewRef = useOnInViewChanged((element, entry) => {
-      capturedElement = element;
+    const inViewRef = useOnInViewChanged((entry) => {
+      capturedElement = entry?.target;
       return undefined;
     });
 

src/index.tsx

@@ -8,9 +8,9 @@ export { observe } from "./observe";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
-export type ObserverInstanceCallback = (
+export type ObserverInstanceCallback<TElement = Element> = (
   inView: boolean,
-  entry: IntersectionObserverEntry,
+  entry: IntersectionObserverEntry & { target: TElement },
 ) => void;
 
 interface RenderProps {
@@ -86,12 +86,13 @@ export type InViewHookResponse = [
 };
 
 /**
- * The callback called by the useOnInViewChanged hook
+ * The callback called by the useOnInViewChanged hook once the element is in view
+ *
+ * Allows to return a cleanup function that will be called when the element goes out of view or when the observer is destroyed
  */
-export type InViewHookChangeListener<TElement extends Element> = (
-  element: TElement,
+export type InViewEnterHookListener<TElement extends Element> = (
   /** Entry is always defined except when `initialInView` is true for the first call */
-  entry: IntersectionObserverEntry | undefined,
+  entry: (IntersectionObserverEntry & { target: TElement }) | undefined,
 ) => // biome-ignore lint/suspicious/noConfusingVoidType: Allow no return statement
   | void
   | undefined

src/observe.ts

@@ -102,9 +102,9 @@ function createObserver(options: IntersectionObserverInit) {
  * @param options - Intersection Observer options
  * @return Function - Cleanup function that should be triggered to unregister the observer
  */
-export function observe(
-  element: Element,
-  callback: ObserverInstanceCallback,
+export function observe<TElement extends Element>(
+  element: TElement,
+  callback: ObserverInstanceCallback<TElement>,
   options: IntersectionObserverInit = {},
 ) {
   // An observer with the same options can be reused, so lets use this fact
@@ -114,15 +114,18 @@ export function observe(
   let callbacks = elements.get(element);
   if (!callbacks) {
     callbacks = [];
-    elements.set(element, callbacks);
+    elements.set(element, callbacks as ObserverInstanceCallback[]);
     observer.observe(element);
   }
 
-  callbacks.push(callback);
+  callbacks.push(callback as ObserverInstanceCallback);
 
   return function unobserve() {
     // Remove the callback from the callback list
-    callbacks.splice(callbacks.indexOf(callback), 1);
+    callbacks.splice(
+      callbacks.indexOf(callback as ObserverInstanceCallback),
+      1,
+    );
 
     if (callbacks.length === 0) {
       // No more callback exists for element, so destroy it

src/useInView.tsx

@@ -61,7 +61,7 @@ export function useInView(
   // Create the ref tracking function using useOnInViewChanged
   const refCallback = useOnInViewChanged(
     // Combined callback - updates state, calls onChange, and returns cleanup if needed
-    (_, entry) => {
+    (entry) => {
       setState({ inView: true, entry });
 
       const { onChange } = latestOptions.current;

src/useOnInViewChanged.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type {
-  InViewHookChangeListener,
+  InViewEnterHookListener,
   IntersectionListenerOptions,
 } from "./index";
 import { observe } from "./observe";
@@ -20,12 +20,12 @@ import { observe } from "./observe";
  * import { useOnInViewChanged } from 'react-intersection-observer';
  *
  * const Component = () => {
- *   const inViewRef = useOnInViewChanged((inView, entry, element) => {
- *     console.log(`Element is ${inView ? 'in view' : 'out of view'}`);
+ *   const inViewRef = useOnInViewChanged((entry) => {
+ *     console.log(`Element is in view`, entry?.target);
  *     // Optional: cleanup function:
- *    return () => {
- *     console.log('Element moved out of view or unmounted');
- *    };
+ *     return () => {
+ *       console.log('Element moved out of view or unmounted');
+ *     };
  *   }, {
  *     threshold: 0,
  *   });
@@ -39,7 +39,7 @@ import { observe } from "./observe";
  * ```
  */
 export const useOnInViewChanged = <TElement extends Element>(
-  onGetsIntoView: InViewHookChangeListener<TElement>,
+  onGetsIntoView: InViewEnterHookListener<TElement>,
   {
     threshold,
     delay,
@@ -70,13 +70,13 @@ export const useOnInViewChanged = <TElement extends Element>(
 
       let callbackCleanup:
         | undefined
-        | ReturnType<InViewHookChangeListener<TElement>>;
+        | ReturnType<InViewEnterHookListener<TElement>>;
       let didTriggerOnce = false;
 
       // If initialInView is true, we have to call the callback immediately
       // to get a cleanup function for the out of view event
       if (initialInView) {
-        callbackCleanup = onGetsIntoViewRef.current(element, undefined);
+        callbackCleanup = onGetsIntoViewRef.current(undefined);
       }
 
       const destroyInviewObserver = observe(
@@ -93,7 +93,7 @@ export const useOnInViewChanged = <TElement extends Element>(
           }
 
           // Call callback with inView state, entry, and element
-          callbackCleanup = onGetsIntoViewRef.current(element, entry);
+          callbackCleanup = onGetsIntoViewRef.current(entry);
 
           didTriggerOnce = true;