Element => HTMLElement

Author: L-Blondy

packages/use-event-listener/src/types.ts

@@ -2,7 +2,7 @@ import type { createInstance } from './vanilla'
 
 type StringOnly<T> = T extends string ? T : never
 
-export type UseEventListenerTarget = Element | Document | Window
+export type UseEventListenerTarget = HTMLElement | Document | Window
 
 type EventMap<Target extends UseEventListenerTarget> = Target extends Window
   ? WindowEventMap

packages/use-intersection-observer/src/index.spec.tsx

@@ -207,7 +207,7 @@ test('The callback should be executed only for the intersecting targets', async
   const callbackSpy1 = vi.fn()
   const callbackSpy2 = vi.fn()
 
-  let target: Element | null = null
+  let target: HTMLElement | null = null
 
   render(<TestComponent />)
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -225,7 +225,7 @@ test('The callback should be executed only for the intersecting targets', async
       <div>
         <div
           ref={React.useCallback(
-            (el: any) => {
+            (el: HTMLElement | null) => {
               ref(el)
               if (!target && el) {
                 target = el

packages/use-intersection-observer/src/index.ts

@@ -31,11 +31,11 @@ export type UseIntersectionObserverReturn = {
    *
    * @remarks `Function`
    */
-  ref: React.Dispatch<React.SetStateAction<Element | null>>
+  ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>
   /**
    * The observed element.
    */
-  target: Element | null
+  target: HTMLElement | null
 }
 
 export const useIntersectionObserver = (
@@ -49,7 +49,7 @@ export const useIntersectionObserver = (
 ) => {
   const instanceRef = React.useRef<IntersectionObserverInstance | null>(null)
   const stableCallback = useEventHandler(callback)
-  const [target, ref] = React.useState<Element | null>(null)
+  const [target, ref] = React.useState<HTMLElement | null>(null)
 
   const observe = React.useCallback(() => {
     target && instanceRef.current?.observe(target, stableCallback)

packages/use-mutation-observer/src/index.ts

@@ -30,11 +30,11 @@ export type UseMutationObserverReturn = {
    *
    * @remarks `Function`
    */
-  ref: React.Dispatch<React.SetStateAction<Element | null>>
+  ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>
   /**
    * The observed element.
    */
-  target: Element | null
+  target: HTMLElement | null
 }
 
 export const useMutationObserver = (
@@ -43,7 +43,7 @@ export const useMutationObserver = (
 ) => {
   const stableOptions = useStableOptions(options)
   const stableCallback = useEventHandler(callback)
-  const [target, ref] = React.useState<Element | null>(null)
+  const [target, ref] = React.useState<HTMLElement | null>(null)
 
   // never changes
   const observer = React.useMemo(

packages/use-resize-observer/src/index.ts

@@ -26,11 +26,11 @@ export type UseResizeObserverReturn = {
    *
    * @remarks `Function`
    */
-  ref: React.Dispatch<React.SetStateAction<Element | null>>
+  ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>
   /**
    * The observed element.
    */
-  target: Element | null
+  target: HTMLElement | null
 }
 
 export type UseResizeObserverCallback = (
@@ -43,7 +43,7 @@ export const useResizeObserver = (
   { autoObserve = true, box }: UseResizeObserverOptions = {},
 ): UseResizeObserverReturn => {
   const stableCallback = useEventHandler(callback)
-  const [target, ref] = React.useState<Element | null>(null)
+  const [target, ref] = React.useState<HTMLElement | null>(null)
   // since observing instantly triggers the observer callback
   // we want to prevent observing if the target is already observed
   const isObservingRef = React.useRef(false)

packages/use-size/src/index.ts

@@ -32,18 +32,18 @@ export type UseSizeReturn = Size & {
    *
    * @remarks `Function`
    */
-  ref: React.Dispatch<React.SetStateAction<Element | null>>
+  ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>
   /**
    * The observed element.
    */
-  target: Element | null
+  target: HTMLElement | null
 }
 
 export function useSize({
   trackState = true,
   onChange,
 }: UseSizeOptions = {}): UseSizeReturn {
-  const [target, ref] = React.useState<Element | null>(null)
+  const [target, ref] = React.useState<HTMLElement | null>(null)
   const [size, setSize] = React.useState<Size>({})
   const handleChange = useEventHandler(onChange)