From 4deb48b35efab4256fa3938ffbe2224d9e33036f Mon Sep 17 00:00:00 2001
From: lintuming <lintuming@tuzhanai.com>
Date: Wed, 28 Aug 2019 09:28:28 +0800
Subject: [PATCH] add `useMeasure` story

---
 src/__stories__/useMeasure.story.tsx | 27 +++++++++++++++++++++++++++
 src/index.ts                         |  1 +
 src/useMeasure.ts                    |  5 +++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/__stories__/useMeasure.story.tsx

diff --git a/src/__stories__/useMeasure.story.tsx b/src/__stories__/useMeasure.story.tsx
new file mode 100644
index 00000000..c91fa18b
--- /dev/null
+++ b/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 />);
diff --git a/src/index.ts b/src/index.ts
index 644f587e..ec66b1b7 100644
--- a/src/index.ts
+++ b/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';
diff --git a/src/useMeasure.ts b/src/useMeasure.ts
index 6a68d015..8e0d82bf 100644
--- a/src/useMeasure.ts
+++ b/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);
+        }
       })
   );