Allow passing DOM elem directly

README.md

@@ -9,12 +9,19 @@ yarn add @rehooks/component-size
 ## Usage
 
 ```js
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import useComponentSize from '@rehooks/component-size'
 
 function MyComponent() {
-  let ref = useRef(null)
-  let size = useComponentSize(ref)
+  const [imgElem, setImageElem] = useState(null);
+  // callback ref to ensure re-render when ref is set, as per React docs
+  // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
+  let ref = useCallback(elem => {
+    if (elem !== null) {
+      setImgElem(elem)
+    }
+  }, [])
+  let size = useComponentSize(imgElem)
   // size == { width: 100, height: 200 }
   let { width, height } = size
   let imgUrl = `https://via.placeholder.com/${width}x${height}`

index.d.ts

@@ -3,4 +3,4 @@ interface ComponentSize {
   height: number
 }
 
-export default function useComponentSize<T = any>(ref: React.RefObject<T>): ComponentSize
+export default function useComponentSize<T = any>(ref: T | React.RefObject<T>): ComponentSize

index.js

@@ -18,24 +18,29 @@ function getSize(el) {
   }
 }
 
-function useComponentSize(ref) {
-  var _useState = useState(getSize(ref ? ref.current : {}))
+function useComponentSize(elemOrRef) {
+  const el = elemOrRef && (
+    elemOrRef instanceof Element || elemOrRef instanceof HTMLDocument
+      ? elemOrRef
+      : elemOrRef.current
+  );
+  var _useState = useState(getSize(el))
   var ComponentSize = _useState[0]
   var setComponentSize = _useState[1]
 
   var handleResize = useCallback(
     function handleResize() {
-      if (ref.current) {
-        setComponentSize(getSize(ref.current))
+      if (el) {
+        setComponentSize(getSize(el))
       }
     },
-    [ref]
+    [el]
   )
 
   useLayoutEffect(
     function() {
-      if (!ref.current) {
-        return
+      if (!el) {
+        return;
       }
 
       handleResize()
@@ -44,10 +49,10 @@ function useComponentSize(ref) {
         var resizeObserver = new ResizeObserver(function() {
           handleResize()
         })
-        resizeObserver.observe(ref.current)
+        resizeObserver.observe(el)
 
         return function() {
-          resizeObserver.disconnect(ref.current)
+          resizeObserver.disconnect(el)
           resizeObserver = null
         }
       } else {
@@ -58,7 +63,7 @@ function useComponentSize(ref) {
         }
       }
     },
-    [ref.current]
+    [el]
   )
 
   return ComponentSize

index.js.flow

@@ -3,4 +3,4 @@ interface ComponentSize {
   height: number,
 }
 
-declare export default function useComponentSize<T>(ref: React.Ref<T>): ComponentSize;
+declare export default function useComponentSize<T>(ref: T | React.Ref<T>): ComponentSize;