[useMeasure] ResizeObserverOptions added as prop

docs/useMeasure.md

@@ -25,9 +25,32 @@ const Demo = () => {
 };
 ```
 
+## Usage with observer options
+```jsx
+import { useMeasure } from "react-use";
+
+const Demo = () => {
+  const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure({ observerOptions: { box: 'border-box' } });
+
+  return (
+    <div ref={ref}>
+      <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>
+  );
+};
+```
+
 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. 
+In order to use observerOptions check [CanIUse](https://caniuse.com/resizeobserver).
 
 ```js
 if (!window.ResizeObserver) {

src/useMeasure.ts

@@ -1,13 +1,21 @@
 import { useMemo, useState } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import { isBrowser, noop } from './misc/util';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 export type UseMeasureRect = Pick<
   DOMRectReadOnly,
   'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'
 >;
 export type UseMeasureRef<E extends Element = Element> = (element: E) => void;
-export type UseMeasureResult<E extends Element = Element> = [UseMeasureRef<E>, UseMeasureRect];
+export type UseMeasureResult<E extends Element = Element> = [
+  UseMeasureRef<E>,
+  UseMeasureRect,
+  E | null
+];
+type UseMeasureParams = {
+  // @ts-ignore [ResizeObserverOptions is not defined in resize-observer-polyfill]
+  observerOptions?: ResizeObserverOptions;
+};
 
 const defaultState: UseMeasureRect = {
   x: 0,
@@ -20,7 +28,8 @@ const defaultState: UseMeasureRect = {
   right: 0,
 };
 
-function useMeasure<E extends Element = Element>(): UseMeasureResult<E> {
+function useMeasure<E extends Element = Element>(params?: UseMeasureParams): UseMeasureResult<E> {
+  const { observerOptions } = { ...params };
   const [element, ref] = useState<E | null>(null);
   const [rect, setRect] = useState<UseMeasureRect>(defaultState);
 
@@ -37,15 +46,15 @@ function useMeasure<E extends Element = Element>(): UseMeasureResult<E> {
 
   useIsomorphicLayoutEffect(() => {
     if (!element) return;
-    observer.observe(element);
+    observer.observe(element, observerOptions);
     return () => {
       observer.disconnect();
     };
   }, [element]);
 
-  return [ref, rect];
+  return [ref, rect, element];
 }
 
 export default isBrowser && typeof (window as any).ResizeObserver !== 'undefined'
   ? useMeasure
-  : ((() => [noop, defaultState]) as typeof useMeasure);
+  : ((() => [noop, defaultState, null]) as typeof useMeasure);

stories/useMeasure.story.tsx

@@ -16,6 +16,23 @@ const Demo = () => {
   );
 };
 
+const DemoObserverOptions = () => {
+  const [ref, state] = useMeasure({ observerOptions: { box: 'border-box' } });
+
+  return (
+    <>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <div ref={ref} style={{ background: 'red' }}>
+        resize me
+      </div>
+    </>
+  );
+};
+
 storiesOf('Sensors/useMeasure', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useMeasure.md')} />)
   .add('Demo', () => <Demo />);
+
+storiesOf('Sensors/useMeasure', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/useMeasure.md')} />)
+  .add('DemoObserverOptions', () => <DemoObserverOptions />);