From a0ebde6e51aff03f0e3772fe885c56d1fc75b776 Mon Sep 17 00:00:00 2001 From: ngorin Date: Wed, 23 Aug 2023 10:55:56 +0300 Subject: [PATCH 1/2] feat: create useViewportSize hook --- src/hooks/UseViewportSize/UseViewportSize.tsx | 38 +++++++++++++++++++ .../__tests__/UseViewportSize.test.tsx | 25 ++++++++++++ src/hooks/UseViewportSize/index.ts | 2 + src/hooks/index.ts | 1 + src/index.ts | 1 + 5 files changed, 67 insertions(+) create mode 100644 src/hooks/UseViewportSize/UseViewportSize.tsx create mode 100644 src/hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx create mode 100644 src/hooks/UseViewportSize/index.ts create mode 100644 src/hooks/index.ts diff --git a/src/hooks/UseViewportSize/UseViewportSize.tsx b/src/hooks/UseViewportSize/UseViewportSize.tsx new file mode 100644 index 000000000..f481c32b1 --- /dev/null +++ b/src/hooks/UseViewportSize/UseViewportSize.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +export interface ViewportSize { + width?: number; + height?: number; +} + +const getViewportSize = (): ViewportSize => ({ + width: window?.visualViewport?.width ?? window?.innerWidth ?? undefined, + height: window?.visualViewport?.height ?? window?.innerHeight ?? undefined, +}); + +/** + * A hook to get the size of the viewport when resizing + * + * @return - {width, height} + */ +export const useViewportSize = (): ViewportSize => { + const [size, setSize] = React.useState(getViewportSize()); + + React.useEffect(() => { + const onResize = () => { + let newSize = getViewportSize(); + if (newSize.width === size?.width && newSize.height === size?.height) { + newSize = size; + } + setSize(newSize); + }; + + (window.visualViewport ?? window).addEventListener('resize', onResize); + + return () => { + (window.visualViewport ?? window).removeEventListener('resize', onResize); + }; + }, [size]); + + return size; +}; diff --git a/src/hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx b/src/hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx new file mode 100644 index 000000000..8b5c5a742 --- /dev/null +++ b/src/hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx @@ -0,0 +1,25 @@ +import {act, fireEvent, renderHook} from '@testing-library/react'; + +import {useViewportSize} from '..'; + +test('Check useViewportSize correct work', () => { + const view = renderHook(() => useViewportSize()); + + act(() => { + window.innerHeight = 500; + window.innerWidth = 500; + }); + + fireEvent(window, new Event('resize')); + + expect(view.result.current).toEqual({height: 500, width: 500}); + + act(() => { + window.innerHeight = 1200; + window.innerWidth = 1200; + }); + + fireEvent(window, new Event('resize')); + + expect(view.result.current).toEqual({height: 1200, width: 1200}); +}); diff --git a/src/hooks/UseViewportSize/index.ts b/src/hooks/UseViewportSize/index.ts new file mode 100644 index 000000000..6907d6ebd --- /dev/null +++ b/src/hooks/UseViewportSize/index.ts @@ -0,0 +1,2 @@ +export {useViewportSize} from './UseViewportSize'; +export type {ViewportSize} from './UseViewportSize'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 000000000..e5df47df3 --- /dev/null +++ b/src/hooks/index.ts @@ -0,0 +1 @@ +export * from './UseViewportSize'; diff --git a/src/index.ts b/src/index.ts index 07635cbbc..f76fd6f16 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,2 @@ export * from './components'; +export * from './hooks'; From e9b1376e2fe496a41e5c4a0c7ddb255a1c45d563 Mon Sep 17 00:00:00 2001 From: ngorin Date: Wed, 23 Aug 2023 15:40:56 +0300 Subject: [PATCH 2/2] feat: replace hook --- .../utils/useViewportSize/__tests__/useViewportSize.test.tsx} | 0 src/components/utils/useViewportSize/index.ts | 2 ++ .../utils/useViewportSize/useViewportSize.tsx} | 0 src/hooks/UseViewportSize/index.ts | 2 -- src/hooks/index.ts | 1 - src/index.ts | 1 - 6 files changed, 2 insertions(+), 4 deletions(-) rename src/{hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx => components/utils/useViewportSize/__tests__/useViewportSize.test.tsx} (100%) create mode 100644 src/components/utils/useViewportSize/index.ts rename src/{hooks/UseViewportSize/UseViewportSize.tsx => components/utils/useViewportSize/useViewportSize.tsx} (100%) delete mode 100644 src/hooks/UseViewportSize/index.ts delete mode 100644 src/hooks/index.ts diff --git a/src/hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx b/src/components/utils/useViewportSize/__tests__/useViewportSize.test.tsx similarity index 100% rename from src/hooks/UseViewportSize/__tests__/UseViewportSize.test.tsx rename to src/components/utils/useViewportSize/__tests__/useViewportSize.test.tsx diff --git a/src/components/utils/useViewportSize/index.ts b/src/components/utils/useViewportSize/index.ts new file mode 100644 index 000000000..35c194400 --- /dev/null +++ b/src/components/utils/useViewportSize/index.ts @@ -0,0 +1,2 @@ +export {useViewportSize} from './useViewportSize'; +export type {ViewportSize} from './useViewportSize'; diff --git a/src/hooks/UseViewportSize/UseViewportSize.tsx b/src/components/utils/useViewportSize/useViewportSize.tsx similarity index 100% rename from src/hooks/UseViewportSize/UseViewportSize.tsx rename to src/components/utils/useViewportSize/useViewportSize.tsx diff --git a/src/hooks/UseViewportSize/index.ts b/src/hooks/UseViewportSize/index.ts deleted file mode 100644 index 6907d6ebd..000000000 --- a/src/hooks/UseViewportSize/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {useViewportSize} from './UseViewportSize'; -export type {ViewportSize} from './UseViewportSize'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts deleted file mode 100644 index e5df47df3..000000000 --- a/src/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './UseViewportSize'; diff --git a/src/index.ts b/src/index.ts index f76fd6f16..07635cbbc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1 @@ export * from './components'; -export * from './hooks';