Added 'rootEl' oprional property to next/Image component resembling 'root' option of the Intersection Observer API

Author: 11koukou

packages/next/client/image.tsx

@@ -101,6 +101,8 @@ export type ImageProps = Omit<
   quality?: number | string
   priority?: boolean
   loading?: LoadingValue
+  //added 'rootEl' property of type HTMLElement, nullable for being able to set default value to null (see Below)
+  rootEl?: HTMLElement | null
   lazyBoundary?: string
   placeholder?: PlaceholderValue
   blurDataURL?: string
@@ -315,6 +317,7 @@ export default function Image({
   unoptimized = false,
   priority = false,
   loading,
+  rootEl = null, //setting to null for the Intersection Observer API to set html root element as 'root' by default
   lazyBoundary = '200px',
   className,
   quality,
@@ -505,6 +508,8 @@ export default function Image({
   }
 
   const [setRef, isIntersected] = useIntersection<HTMLImageElement>({
+    //added 'root' to Options
+    root: rootEl,
     rootMargin: lazyBoundary,
     disabled: !isLazy,
   })

packages/next/client/use-intersection.tsx

@@ -4,7 +4,11 @@ import {
   cancelIdleCallback,
 } from './request-idle-callback'
 
-type UseIntersectionObserverInit = Pick<IntersectionObserverInit, 'rootMargin'>
+type UseIntersectionObserverInit = Pick<
+  IntersectionObserverInit,
+  'rootMargin' | 'root'
+> //added 'root' as a property
+
 type UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit
 type ObserveCallback = (isVisible: boolean) => void
 type Observer = {
@@ -16,6 +20,8 @@ type Observer = {
 const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined'
 
 export function useIntersection<T extends Element>({
+  //added 'root' as an option
+  root,
   rootMargin,
   disabled,
 }: UseIntersection): [(element: T | null) => void, boolean] {
@@ -37,11 +43,11 @@ export function useIntersection<T extends Element>({
         unobserve.current = observe(
           el,
           (isVisible) => isVisible && setVisible(isVisible),
-          { rootMargin }
+          { root, rootMargin } //added 'root' as an option
         )
       }
     },
-    [isDisabled, rootMargin, visible]
+    [isDisabled, root, rootMargin, visible] //added 'root' as a dependency
   )
 
   useEffect(() => {