docs: useMeasure and useSize docs tidy

README.md

@@ -61,11 +61,11 @@
   - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.
   - [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
   - [`useScrolling`](./docs/useScrolling.md) — tracks whether HTML element is scrolling.
-  - [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions.
+  - [`useSize`](./docs/useSize.md) — tracks an HTML element's size.
   - [`useStartTyping`](./docs/useStartTyping.md) — detects when user starts typing.
   - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
   - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
-  - [`useMeasure`](./docs/useMeasure.md) — tracks an HTML element's dimensions by [Resize Observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver).[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
+  - [`useMeasure`](./docs/useMeasure.md) — tracks an HTML element's dimensions using the Resize Observer API.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
     <br/>
     <br/>
 - [**UI**](./docs/UI.md)

docs/useMeasure.md

@@ -1,6 +1,6 @@
 # `useMeasure`
 
-React sensor hook that reacts to changes in size of any of the observed elements.
+React sensor hook that tracks dimensions of an HTML element using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
 
 ## Usage
 
@@ -8,12 +8,18 @@ React sensor hook that reacts to changes in size of any of the observed elements
 import { useMeasure } from "react-use";
 
 const Demo = () => {
-  const [ref, { width, height }] = useMeasure();
+  const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();
 
   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>
   );
 };
@@ -21,4 +27,4 @@ const Demo = () => {
 
 ## Related hooks
 
-- [useSize](./useSize.md)
+- [useSize](./useSize.md)

docs/useSize.md

@@ -9,7 +9,7 @@ import {useSize} from 'react-use';
 
 const Demo = () => {
   const [sized, {width, height}] = useSize(
-    ({width}) => <div style={{border: '1px solid red'}}>Size me up! ({width}px)</div>,
+    ({width}) => <div style={{background: 'red'}}>Size me up! ({width}px)</div>,
     { width: 100, height: 100 }
   );
 
@@ -31,3 +31,7 @@ useSize(element, initialSize);
 
 - `element` &mdash; sized element.
 - `initialSize` &mdash; initial size containing a `width` and `height` key.
+
+## Related hooks
+
+- [useMeasure](./useMeasure.md)

src/__stories__/useMeasure.story.tsx

@@ -4,18 +4,12 @@ import { useMeasure } from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const [ref, { width, height }] = useMeasure();
+  const [ref, state] = useMeasure();
 
   return (
     <>
-      <div>width: {width}</div>
-      <div>height: {height}</div>
-      <div
-        style={{
-          background: 'red',
-        }}
-        ref={ref}
-      >
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <div ref={ref} style={{ background: 'red' }}>
         resize me
       </div>
     </>

src/__stories__/useSize.story.tsx

@@ -4,15 +4,14 @@ import { useSize } from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const [sized, { width, height }] = useSize(({ width: currentWidth }) => (
-    <div style={{ border: '1px solid red' }}>Size me up! ({currentWidth}px)</div>
+  const [sized, state] = useSize(({ width: currentWidth }) => (
+    <div style={{ background: 'red' }}>Size me up! ({currentWidth}px)</div>
   ));
 
   return (
     <div>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
       {sized}
-      <div>width: {width}</div>
-      <div>height: {height}</div>
     </div>
   );
 };