Change the type of refs for react 19

packages/usehooks-ts/src/useEventListener/useEventListener.ts

@@ -31,7 +31,7 @@ function useEventListener<
   handler:
     | ((event: HTMLElementEventMap[K]) => void)
     | ((event: SVGElementEventMap[K]) => void),
-  element: RefObject<T>,
+  element: RefObject<T | null | undefined>,
   options?: boolean | AddEventListenerOptions,
 ): void
 
@@ -51,7 +51,7 @@ function useEventListener<K extends keyof DocumentEventMap>(
  * @template T - The type of the DOM element (default is `HTMLElement`).
  * @param {KW | KH | KM} eventName - The name of the event to listen for.
  * @param {(event: WindowEventMap[KW] | HTMLElementEventMap[KH] | SVGElementEventMap[KH] | MediaQueryListEventMap[KM] | Event) => void} handler - The event handler function.
- * @param {RefObject<T>} [element] - The DOM element or media query list to attach the event listener to (optional).
+ * @param {RefObject<T | null | undefined>} [element] - The DOM element or media query list to attach the event listener to (optional).
  * @param {boolean | AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener (optional).
  * @public
  * @see [Documentation](https://usehooks-ts.com/react-hook/use-event-listener)
@@ -88,7 +88,7 @@ function useEventListener<
       | MediaQueryListEventMap[KM]
       | Event,
   ) => void,
-  element?: RefObject<T>,
+  element?: RefObject<T | null | undefined>,
   options?: boolean | AddEventListenerOptions,
 ) {
   // Create a ref that stores handler

packages/usehooks-ts/src/useHover/useHover.ts

@@ -7,7 +7,7 @@ import { useEventListener } from '../useEventListener'
 /**
  * Custom hook that tracks whether a DOM element is being hovered over.
  * @template T - The type of the DOM element. Defaults to `HTMLElement`.
- * @param {RefObject<T>} elementRef - The ref object for the DOM element to track.
+ * @param {RefObject<T | null | undefined>} elementRef - The ref object for the DOM element to track.
  * @returns {boolean} A boolean value indicating whether the element is being hovered over.
  * @public
  * @see [Documentation](https://usehooks-ts.com/react-hook/use-hover)
@@ -19,7 +19,7 @@ import { useEventListener } from '../useEventListener'
  * ```
  */
 export function useHover<T extends HTMLElement = HTMLElement>(
-  elementRef: RefObject<T>,
+  elementRef: RefObject<T | null | undefined>,
 ): boolean {
   const [value, setValue] = useState<boolean>(false)
 

packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts

@@ -14,7 +14,7 @@ type EventType =
 /**
  * Custom hook that handles clicks outside a specified element.
  * @template T - The type of the element's reference.
- * @param {RefObject<T> | RefObject<T>[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
+ * @param {RefObject<T | null | undefined> | RefObject<T | null | undefined>[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
  * @param {(event: MouseEvent | TouchEvent | FocusEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
  * @param {EventType} [eventType] - The mouse event type to listen for (optional, default is 'mousedown').
  * @param {?AddEventListenerOptions} [eventListenerOptions] - The options object to be passed to the `addEventListener` method (optional).
@@ -30,7 +30,7 @@ type EventType =
  * ```
  */
 export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T> | RefObject<T>[],
+  ref: RefObject<T | null | undefined> | RefObject<T | null | undefined>[],
   handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
   eventType: EventType = 'mousedown',
   eventListenerOptions: AddEventListenerOptions = {},

packages/usehooks-ts/src/useResizeObserver/useResizeObserver.ts

@@ -15,7 +15,7 @@ type Size = {
 /** The options for the ResizeObserver. */
 type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
   /** The ref of the element to observe. */
-  ref: RefObject<T>
+  ref: RefObject<T | null | undefined>
   /**
    * When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback.
    * @default undefined