add useMeasure story

src/__stories__/useMeasure.story.tsx

@@ -0,0 +1,27 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { useMeasure } from '..';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const [ref, { width, height }] = useMeasure();
+
+  return (
+    <>
+      <div>width: {width}</div>
+      <div>height: {height}</div>
+      <div
+        style={{
+          background: 'red',
+        }}
+        ref={ref}
+      >
+        resize me
+      </div>
+    </>
+  );
+};
+
+storiesOf('Sensors|useMeasure', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMeasure.md')} />)
+  .add('Demo', () => <Demo />);

src/index.ts

@@ -85,3 +85,4 @@ export { default as useVideo } from './useVideo';
 export { useWait, Waiter } from './useWait';
 export { default as useWindowScroll } from './useWindowScroll';
 export { default as useWindowSize } from './useWindowSize';
+export { default as useMeasure } from './useMeasure';

src/useMeasure.ts

@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-
 export interface ContentRect {
   width: number;
   height: number;
@@ -23,7 +22,9 @@ const useMeasure = <T>(): [(instance: T) => void, ContentRect] => {
     () =>
       new ResizeObserver(entries => {
         const entry = entries[0];
-        set(entry.contentRect);
+        if (entry) {
+          set(entry.contentRect);
+        }
       })
   );