Use measure track custom ref

docs/useMeasure.md

@@ -12,7 +12,25 @@ const Demo = () => {
 
   return (
     <div ref={ref}>
-      <div>x: {x}</div>	
+      <div>x: {x}</div>
+      <div>y: {y}</div>
+      <div>width: {width}</div>
+      <div>height: {height}</div>
+      <div>top: {top}</div>
+      <div>right: {right}</div>
+      <div>bottom: {bottom}</div>
+      <div>left: {left}</div>
+    </div>
+  );
+};
+
+const DemoWithCustomRef = () => {
+  const elementRef = useRef();
+  const { x, y, width, height, top, right, bottom, left } = useMeasure(elementRef);
+
+  return (
+    <div ref={elementRef}>
+      <div>x: {x}</div>
       <div>y: {y}</div>
       <div>width: {width}</div>
       <div>height: {height}</div>
@@ -25,9 +43,9 @@ const Demo = () => {
 };
 ```
 
-This hook uses [`ResizeObserver` API][resize-observer], if you want to support 
-legacy browsers, consider installing [`resize-observer-polyfill`][resize-observer-polyfill] 
-before running your app. 
+This hook uses [`ResizeObserver` API][resize-observer], if you want to support
+legacy browsers, consider installing [`resize-observer-polyfill`][resize-observer-polyfill]
+before running your app.
 
 ```js
 if (!window.ResizeObserver) {

src/useMeasure.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, MutableRefObject, useEffect } from 'react';
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import { isBrowser, noop } from './misc/util';
 
@@ -20,10 +20,18 @@ const defaultState: UseMeasureRect = {
   right: 0,
 };
 
-function useMeasure<E extends Element = Element>(): UseMeasureResult<E> {
-  const [element, ref] = useState<E | null>(null);
+function useMeasure<E extends Element = Element>(): UseMeasureResult<E>;
+function useMeasure<E extends Element = Element>(ref: MutableRefObject<E>): UseMeasureRect;
+function useMeasure<E extends Element = Element>(ref?: MutableRefObject<E>): any {
+  const [element, setElement] = useState<E | null>(null);
   const [rect, setRect] = useState<UseMeasureRect>(defaultState);
 
+  useEffect(() => {
+    if (ref) {
+      setElement(ref.current);
+    }
+  }, [ref]);
+
   const observer = useMemo(
     () =>
       new (window as any).ResizeObserver((entries) => {
@@ -43,7 +51,12 @@ function useMeasure<E extends Element = Element>(): UseMeasureResult<E> {
     };
   }, [element]);
 
-  return [ref, rect];
+  // We don't need to return element setter in case we pass ref as an argument
+  if (ref) {
+    return rect;
+  }
+
+  return [setElement, rect];
 }
 
 export default isBrowser && typeof (window as any).ResizeObserver !== 'undefined'

stories/useMeasure.story.tsx

@@ -1,16 +1,26 @@
 import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useMeasure } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
+  const elementRef = useRef<HTMLDivElement>(null);
   const [ref, state] = useMeasure();
+  const stateArgs = useMeasure(elementRef);
 
   return (
     <>
-      <pre>{JSON.stringify(state, null, 2)}</pre>
-      <div ref={ref} style={{ background: 'red' }}>
-        resize me
+      <div>
+        <pre>{JSON.stringify(state, null, 2)}</pre>
+        <div ref={ref} style={{ background: 'red' }}>
+          resize me
+        </div>
+      </div>
+      <div>
+        <pre>{JSON.stringify(stateArgs, null, 2)}</pre>
+        <div ref={elementRef} style={{ background: 'red' }}>
+          resize me (ref passed in the arguments)
+        </div>
       </div>
     </>
   );

tests/useMeasure.test.ts

@@ -181,3 +181,17 @@ it('calls .disconnect() on ResizeObserver when component unmounts', () => {
 
   expect(disconnect).toHaveBeenCalledTimes(1);
 });
+
+it('returns only rect when ref is passed as an argument', () => {
+  const div = document.createElement('div');
+  const { result } = renderHook(() => useMeasure({ current: div }));
+
+  expect(result.current).toMatchObject({
+    width: 0,
+    height: 0,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  });
+})