onChange to useWindowSize

src/useWindowSize.ts

@@ -3,18 +3,36 @@ import { useEffect } from 'react';
 import useRafState from './useRafState';
 import { isBrowser, off, on } from './misc/util';
 
-const useWindowSize = (initialWidth = Infinity, initialHeight = Infinity) => {
-  const [state, setState] = useRafState<{ width: number; height: number }>({
+export interface Size {
+  height: number;
+  width: number;
+}
+
+export interface Options {
+  initialWidth?: number;
+  initialHeight?: number;
+  onChange?: (size: Size) => void;
+}
+
+const useWindowSize = (options?: Options) => {
+  const { initialHeight = Infinity, initialWidth = Infinity, onChange } = options || {};
+
+  const [state, setState] = useRafState<Size>({
     width: isBrowser ? window.innerWidth : initialWidth,
     height: isBrowser ? window.innerHeight : initialHeight,
   });
 
   useEffect((): (() => void) | void => {
     if (isBrowser) {
       const handler = () => {
-        setState({
-          width: window.innerWidth,
-          height: window.innerHeight,
+        setState(() => {
+          const size = { width: window.innerWidth, height: window.innerHeight };
+
+          if (onChange) {
+            onChange(size);
+          }
+
+          return size;
         });
       };
 

tests/useWindowSize.test.tsx

@@ -44,7 +44,7 @@ describe('useWindowSize', () => {
   });
 
   it('should use passed parameters as initial values in case of non-browser use', () => {
-    const hook = getHook(1, 1);
+    const hook = getHook({ initialWidth: 1, initialHeight: 1 });
 
     expect(hook.result.current.height).toBe(isBrowser ? window.innerHeight : 1);
     expect(hook.result.current.width).toBe(isBrowser ? window.innerWidth : 1);
@@ -85,4 +85,45 @@ describe('useWindowSize', () => {
 
     expect(hook.result.current.width).toBe(2048);
   });
+
+  it('should run onChange function on re-render', () => {
+    let testValue = false;
+
+    getHook({
+      onChange: () => {
+        testValue = true;
+      },
+    });
+
+    act(() => {
+      triggerResize('height', 2048);
+      requestAnimationFrame.step();
+    });
+
+    expect(testValue).toBe(true);
+  });
+
+  it('should provide right size value for onChange function', () => {
+    let size = { width: Infinity, height: Infinity };
+
+    const hook = getHook({
+      onChange: ({ width, height }) => {
+        size = { width, height };
+      },
+    });
+
+    act(() => {
+      triggerResize('height', 2048);
+      requestAnimationFrame.step();
+    });
+
+    act(() => {
+      triggerResize('width', 2048);
+      requestAnimationFrame.step();
+    });
+
+    expect(hook.result.current.height).toBe(2048);
+    expect(hook.result.current.width).toBe(2048);
+    expect(size).toEqual(hook.result.current);
+  });
 });