fix: handle invalid input, update test

Author: fouad

example.js

@@ -12,7 +12,10 @@ function App() {
     <div style={{ width: '100%', height: '100%' }}>
       <pre>{JSON.stringify({ width, height })}</pre>
       <button onClick={() => setFullWidth(!fullWidth)}>Toggle Size</button>
-      <div ref={ref} style={{ width: fullWidth ? '100%' : '50%', height: '50%' }}>
+      <div
+        ref={ref}
+        style={{ width: fullWidth ? '100%' : '50%', height: '50%' }}
+      >
         <img src={imgUrl} width={width} height={height} />
       </div>
     </div>

index.js

@@ -3,7 +3,10 @@ let { useCallback, useState, useLayoutEffect } = require('react')
 
 function getSize(el) {
   if (!el) {
-    return {}
+    return {
+      width: 0,
+      height: 0
+    }
   }
 
   return {
@@ -13,7 +16,9 @@ function getSize(el) {
 }
 
 function useComponentSize(ref) {
-  let [ComponentSize, setComponentSize] = useState(getSize(ref.current))
+  let [ComponentSize, setComponentSize] = useState(
+    getSize(ref ? ref.current : {})
+  )
 
   const handleResize = useCallback(
     function handleResize() {
@@ -24,28 +29,32 @@ function useComponentSize(ref) {
     [ref]
   )
 
-  useLayoutEffect(() => {
-    if (!ref.current) { return }
+  useLayoutEffect(
+    () => {
+      if (!ref.current) {
+        return
+      }
 
-    handleResize()
+      handleResize()
 
-    if (typeof ResizeObserver === 'function') {
-      let resizeObserver = new ResizeObserver(() => handleResize())
-      resizeObserver.observe(ref.current)
+      if (typeof ResizeObserver === 'function') {
+        let resizeObserver = new ResizeObserver(() => handleResize())
+        resizeObserver.observe(ref.current)
 
-      return () => {
-        resizeObserver.disconnect(ref.current)
-        resizeObserver = null
-      }
-    } else {
-      window.addEventListener('resize', handleResize)
-      
-      return () => {
-        window.removeEventListener('resize', handleResize) 
+        return () => {
+          resizeObserver.disconnect(ref.current)
+          resizeObserver = null
+        }
+      } else {
+        window.addEventListener('resize', handleResize)
+
+        return () => {
+          window.removeEventListener('resize', handleResize)
+        }
       }
-    }
-    
-  }, [ref.current])
+    },
+    [ref.current]
+  )
 
   return ComponentSize
 }

test.js

@@ -1,20 +1,21 @@
-'use strict';
-let test = require('ava');
-let { createElement: h } = require('react');
-let ReactTestRenderer = require('react-test-renderer');
-let useInputValue = require('./');
+'use strict'
+let test = require('ava')
+let { createElement: h } = require('react')
+let ReactTestRenderer = require('react-test-renderer')
+let useComponentSize = require('./')
 
 function render(val) {
-  return ReactTestRenderer.create(val);
+  return ReactTestRenderer.create(val)
 }
 
 test(t => {
   function Component() {
-    let value = use...();
-    return h('div');
+    let size = useComponentSize({})
+    return h('div', size)
   }
 
-  let input = render(h(Component));
+  let input = render(h(Component))
 
-  t.is(input.toJSON().props.value, '...');
-});
+  t.is(input.toJSON().props.width, 0)
+  t.is(input.toJSON().props.height, 0)
+})