Add useResizeObserver

README.md

@@ -22,6 +22,7 @@ https://sandiiarov.github.io/use-events
 - [useMousePosition](https://sandiiarov.github.io/use-events/#/docs-use-mouse-position)
 - [useTouch](https://sandiiarov.github.io/use-events/#/docs-use-touch)
 - [useWindowResize](https://sandiiarov.github.io/use-events/#/docs-use-window-resize)
+- [useResizeObserver](https://sandiiarov.github.io/use-events/#/docs-use-resize-observer)
 
 # Install
 

__tests__/useResizeObserver.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useResizeObserver } from '../src';
+
+jest.mock('resize-observer-polyfill');
+
+const TestComponent = () => {
+  const ref = React.useRef(null);
+  const [width, height] = useResizeObserver(ref);
+  return <div ref={ref}>{width + height}</div>;
+};
+
+const resize = (width: number, height: number) => {
+  // @ts-ignore
+  ResizeObserver.mockReset();
+  // @ts-ignore
+  ResizeObserver.mockImplementation(cb => {
+    cb([{ contentRect: { width, height } }]);
+    return { observe: jest.fn, disconnect: jest.fn };
+  });
+
+  const { container } = render(<TestComponent />);
+  return container.textContent;
+};
+
+test('useResizeObserver', () => {
+  expect(resize(100, 100)).toBe('200');
+  expect(resize(200, 200)).toBe('400');
+});

__tests__/useWindowResize.test.tsx

@@ -1,26 +1,25 @@
-import * as React from 'react';
-import { act, render } from 'react-testing-library';
+import { act, renderHook } from 'react-hooks-testing-library';
+import { fireEvent } from 'react-testing-library';
 import { useWindowResize } from '../src';
 
-test('useWindowResize should react on window resize events', () => {
-  function fireResize(width: number, height: number) {
-    // @ts-ignore
-    window.innerWidth = width;
-    // @ts-ignore
-    window.innerHeight = height;
-    window.dispatchEvent(new Event('resize'));
-  }
+const resize = (width: number, height: number) => {
+  // @ts-ignore
+  window.innerWidth = width;
+  // @ts-ignore
+  window.innerHeight = height;
+  fireEvent(window, new Event('resize'));
+};
 
-  const TestComponent = () => {
-    const [height, width] = useWindowResize();
-    return <span>{`${width}x${height}`}</span>;
-  };
+test('useWindowResize should react on window resize event', () => {
+  let width, height;
 
-  const { container, rerender } = render(<TestComponent />);
-  act(() => fireResize(800, 600));
-  expect(container.firstChild.textContent).toBe('800x600');
-  act(() => fireResize(1024, 768));
-  expect(container.firstChild.textContent).toBe('1024x768');
-  act(() => fireResize(1440, 800));
-  expect(container.firstChild.textContent).toBe('1440x800');
+  renderHook(() => ([width, height] = useWindowResize()));
+
+  act(() => resize(100, 100));
+  expect(width).toBe(100);
+  expect(height).toBe(100);
+
+  act(() => resize(200, 200));
+  expect(width).toBe(200);
+  expect(height).toBe(200);
 });

docs/useResizeObserver.mdx

@@ -0,0 +1,51 @@
+---
+name: useResizeObserver
+---
+
+import { Playground } from 'docz';
+import { useResizeObserver } from '../src';
+
+# useResizeObserver
+
+```js
+import { useResizeObserver } from 'use-events';
+```
+
+```jsx
+const Example = () => {
+  const ref = React.useRef(null);
+  const [width, height] = useResizeObserver(ref);
+
+  return (
+    <div ref={ref}>
+      <b>width:</b> {width}
+      <b>height:</b> {height}
+    </div>
+  );
+};
+```
+
+<Playground>
+  {() => {
+    const ref = React.useRef(null);
+    const [width, height] = useResizeObserver(ref);
+    return (
+      <div
+        ref={ref}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          resize: 'both',
+          overflow: 'auto',
+          border: '1px solid #CED4DE',
+        }}
+      >
+        <b>width:</b> {width}
+        <b>height:</b> {height}
+      </div>
+    );
+
+}}
+
+</Playground>

docs/useWindowResize.mdx

@@ -13,22 +13,24 @@ import { useWindowResize } from 'use-events';
 
 ```jsx
 const Example = () => {
-  const [height, width] = useWindowResize();
+  const [width, height] = useWindowResize();
 
   return (
     <div>
-      <b>height:</b> {height} <b>width:</b> {width}
+      <b>width:</b> {width}
+      <b>height:</b> {height}
     </div>
   );
 };
 ```
 
 <Playground>
   {() => {
-    const [height, width] = useWindowResize();
+    const [width, height] = useWindowResize();
     return (
       <div>
-        <b>height:</b> {height} <b>width:</b> {width}
+        <b>width:</b> {width}
+        <b>height:</b> {height}
       </div>
     );
   }}

package.json

@@ -45,6 +45,9 @@
   "peerDependencies": {
     "react": ">=16.8.1"
   },
+  "dependencies": {
+    "resize-observer-polyfill": "1.5.1"
+  },
   "devDependencies": {
     "@babel/core": "7.3.4",
     "@babel/preset-env": "7.3.4",

src/index.ts

@@ -3,5 +3,6 @@ export { default as useClickOutside } from './useClickOutside/index';
 export { default as useFocus } from './useFocus/index';
 export { default as useHover } from './useHover/index';
 export { default as useMousePosition } from './useMousePosition/index';
+export { default as useResizeObserver } from './useResizeObserver/index';
 export { default as useTouch } from './useTouch/index';
 export { default as useWindowResize } from './useWindowResize/index';

src/useResizeObserver/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+const useResizeObserver = (
+  ref: React.RefObject<HTMLElement>
+): [number, number] => {
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+
+  React.useLayoutEffect(() => {
+    const { current } = ref;
+
+    const resizeObserver = new ResizeObserver(entries => {
+      const { width, height } = entries[0].contentRect;
+
+      setWidth(width);
+      setHeight(height);
+    });
+
+    if (current !== null) {
+      resizeObserver.observe(current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [width, height];
+};
+
+export default useResizeObserver;

src/useWindowResize/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
 const useWindowResize = (): [number, number] => {
-  const [height, setHeight] = React.useState(window.innerHeight);
   const [width, setWidth] = React.useState(window.innerWidth);
+  const [height, setHeight] = React.useState(window.innerHeight);
 
   const resize = () => {
     setWidth(window.innerWidth);
@@ -17,7 +17,7 @@ const useWindowResize = (): [number, number] => {
     };
   }, []);
 
-  return [height, width];
+  return [width, height];
 };
 
 export default useWindowResize;