Allow for elements to be passed directly to useResizeObserver or useMeasurement hooks

src/hooks/use-measurement/index.ts

@@ -1,12 +1,12 @@
 import { useCallback, useState } from 'react';
 
-import { ReactRef } from '../../utils/element-refs';
+import { ElementOrRef, resolveElement } from '../../utils/element-refs';
 import { useCallbackConst } from '../use-callback-const';
 import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect';
 import { useResizeObserver } from '../use-resize-observer';
 
 export interface UseMeasurementOptions<ElementType extends HTMLElement, StateType = any> {
-  ref: ReactRef<ElementType>;
+  ref: ElementOrRef<ElementType>;
   getMeasurement: (el: ElementType) => StateType;
   defaultValue: StateType | (() => StateType);
 }
@@ -21,8 +21,9 @@ export function useMeasurement<ElementType extends HTMLElement, StateType = any>
   const [measurement, setMeasurement] = useState(defaultValue);
 
   const onResize = useCallback(() => {
-    if (ref.current) {
-      setMeasurement(getMeasurement(ref.current));
+    const el = resolveElement(ref);
+    if (el) {
+      setMeasurement(getMeasurement(el));
     }
   }, [ref, setMeasurement, getMeasurement]);
 
@@ -35,7 +36,7 @@ export function useMeasurement<ElementType extends HTMLElement, StateType = any>
 /**
  * Given an element `ref`, glean a stateful measurement of the width.
  */
-export function useElementWidth<T extends HTMLElement>(ref: ReactRef<T>) {
+export function useElementWidth<T extends HTMLElement>(ref: ElementOrRef<T>) {
   return useMeasurement<T, number>({
     ref,
     getMeasurement: useCallbackConst((el) => {
@@ -48,7 +49,7 @@ export function useElementWidth<T extends HTMLElement>(ref: ReactRef<T>) {
 /**
  * Given an element `ref`, glean a stateful measurement of the height.
  */
-export function useElementHeight<T extends HTMLElement>(ref: ReactRef<T>) {
+export function useElementHeight<T extends HTMLElement>(ref: ElementOrRef<T>) {
   return useMeasurement<T, number>({
     ref,
     getMeasurement: useCallbackConst((el) => {

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

@@ -1,6 +1,6 @@
 import { DependencyList, useEffect, useRef } from 'react';
 
-import { ReactRef } from '../../utils/element-refs';
+import { ElementOrRef, resolveElement } from '../../utils/element-refs';
 import { useIsMounted } from '../use-is-mounted';
 
 function hasResizeObserver() {
@@ -18,7 +18,7 @@ function hasResizeObserver() {
  *   - Skip the callback intersection callback if component is not mounted
  */
 export function useResizeObserver<T extends Element>(
-  ref: ReactRef<T>,
+  ref: ElementOrRef<T>,
   onResize: () => void = () => {},
   deps: DependencyList = [],
 ) {
@@ -30,7 +30,7 @@ export function useResizeObserver<T extends Element>(
   }, [onResize]);
 
   useEffect(() => {
-    const element = ref?.current;
+    const element = resolveElement(ref);
     if (!element) return;
 
     const listener = () => onResizeRef.current();