Docs + Storybook

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

@@ -13,6 +13,7 @@ export type UseMeasureResult<E extends Element = Element> = [
   E | null
 ];
 type UseMeasureParams = {
+  // @ts-ignore [ResizeObserverOptions is not defined in resize-observer-polyfill]
   observerOptions?: ResizeObserverOptions;
 };
 

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 />);