@scrabble-solver/scrabble-solver 2.11.4 → 2.11.6

package/src/components/Results/HeaderButton.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { ReactElement } from 'react';
+import { ReactElement, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
-import { ResultColumn, SortDirection } from 'types';
+import { SortDirection } from 'types';
 
 import { useTooltip } from '../Tooltip';
 
@@ -21,9 +21,9 @@ const HeaderButton = ({ column }: Props): ReactElement => {
   const sort = useTypedSelector(selectResultsSort);
   const triggerProps = useTooltip(translate(column.translationKey));
 
-  const handleOrderChange = (columnId: ResultColumn) => {
-    dispatch(resultsSlice.actions.sort(columnId));
-  };
+  const handleClick = useCallback(() => {
+    dispatch(resultsSlice.actions.sort(column.id));
+  }, [column.id, dispatch]);
 
   return (
     <button
@@ -31,7 +31,7 @@ const HeaderButton = ({ column }: Props): ReactElement => {
       className={classNames(styles.headerButton, column.className)}
       key={column.id}
       type="button"
-      onClick={() => handleOrderChange(column.id)}
+      onClick={handleClick}
       {...triggerProps}
     >
       <span className={styles.cell}>

package/src/components/Results/Results.module.scss

@@ -10,7 +10,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   background: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  font-family: var(--font--family--title);
 }
 
 .emptyState {
@@ -26,6 +25,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .listContainer {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .list {

package/src/components/Results/Results.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
-import { useLatest, useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 
+import { useAppLayout, useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { RESULTS_ITEM_HEIGHT } from 'parameters';
+import { BORDER_WIDTH, RESULTS_HEADER_HEIGHT, RESULTS_ITEM_HEIGHT, TEXT_INPUT_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
@@ -18,7 +18,6 @@ import {
 import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
-import Sizer from '../Sizer';
 
 import HeaderButton from './HeaderButton';
 import Result from './Result';
@@ -35,6 +34,7 @@ interface Props {
 
 const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
+  const { resultsHeight, resultsWidth } = useAppLayout();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const results = useTypedSelector(selectResults);
@@ -42,12 +42,14 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
-  const [sizerRef, { height, width }] = useMeasure<HTMLDivElement>();
   const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
   const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
   const scrollToIndexRef = useLatest(scrollToIndex);
   const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
+  const showInput = hasResults && results.length > 0 && !isOutdated;
+  const height = resultsHeight - RESULTS_HEADER_HEIGHT - (showInput ? TEXT_INPUT_HEIGHT : 0) - 2 * BORDER_WIDTH;
+  const width = resultsWidth - 2 * BORDER_WIDTH;
 
   useEffect(() => {
     // without setTimeout, the initial scrolling offset is calculated
@@ -72,8 +74,6 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
       </div>
 
       <div className={styles.content}>
-        <Sizer ref={sizerRef} />
-
         {typeof error !== 'undefined' && (
           <EmptyState className={styles.emptyState} variant="error">
             {error.message}
@@ -126,7 +126,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
         )}
       </div>
 
-      {hasResults && results.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
+      {showInput && <ResultsInput className={styles.input} />}
 
       {isLoading && <Loading />}
     </div>

package/src/components/Results/useColumns.ts

@@ -1,4 +1,4 @@
-import { useMediaQuery } from 'hooks';
+import { useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, useTypedSelector } from 'state';
 import { ResultColumn } from 'types';
@@ -17,10 +17,7 @@ const COLUMNS_L = [...COLUMNS_XS];
 const useColumns = (): Column[] => {
   const locale = useTypedSelector(selectLocale);
   const localeColumns = getLocaleColumns(LOCALE_FEATURES[locale]);
-  const isLessThanXs = useMediaQuery('<xs');
-  const isLessThanS = useMediaQuery('<s');
-  const isLessThanM = useMediaQuery('<m');
-  const isLessThanL = useMediaQuery('<l');
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
 
   if (isLessThanXs) {
     return localeColumns.filter((column) => COLUMNS_XS.includes(column.id));

package/src/components/Solver/Solver.tsx

@@ -1,15 +1,12 @@
 import { Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
+import { FunctionComponent, memo, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useMeasure } from 'react-use';
 
 import { useAppLayout, useIsTouchDevice } from 'hooks';
-import { BOARD_TILE_SIZE_MAX, BOARD_TILE_SIZE_MIN, BORDER_WIDTH, RACK_TILE_SIZE_MAX } from 'parameters';
 import {
   resultsSlice,
   selectAreResultsOutdated,
-  selectConfig,
   selectResultCandidate,
   selectResults,
   selectSolveError,
@@ -30,33 +27,19 @@ import styles from './Solver.module.scss';
 
 interface Props {
   className?: string;
-  height: number;
-  width: number;
   onShowResults: () => void;
 }
 
-// eslint-disable-next-line max-statements
-const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
+const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { columnWidth, componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
-    useAppLayout();
-  const config = useTypedSelector(selectConfig);
+  const { cellSize, maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const results = useTypedSelector(selectResults);
-  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
-  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const [bestResult] = results || [];
-  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
-  const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
-  const cellSize = Math.min(cellWidth, cellHeight);
-  const cellSizeSafe = Math.min(Math.max(cellSize, BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
-  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
-  const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
   const touchCallbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
@@ -110,7 +93,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
       <div className={styles.container}>
         <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board cellSize={cellSizeSafe} className={styles.board} />
+            <Board cellSize={cellSize} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
@@ -125,7 +108,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
         </div>
       </div>
 
-      <div className={styles.bottomContainer} ref={bottomContainerRef}>
+      <div className={styles.bottomContainer}>
         <div className={styles.bottomContent}>
           <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
@@ -157,4 +140,4 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   );
 };
 
-export default Solver;
+export default memo(Solver);

package/src/components/Tile/Tile.module.scss

@@ -14,6 +14,7 @@
   text-transform: uppercase;
   text-align: center;
   transition: var(--transition);
+  transition-property: background-color, color, box-shadow;
   user-select: none;
 
   &.points1 {
@@ -130,7 +131,7 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
-    border-bottom-right-radius: inherit;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {

package/src/components/Tile/Tile.tsx

@@ -6,6 +6,7 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   Ref,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -68,10 +69,13 @@ const Tile: FunctionComponent<Props> = ({
   const canShowPoints = showTilePoints && (!isEmpty || isBlank) && typeof points !== 'undefined';
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
-  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    ref.current?.select();
-    onKeyDown(event);
-  };
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      ref.current?.select();
+      onKeyDown(event);
+    },
+    [onKeyDown],
+  );
 
   useEffect(() => {
     if (autoFocus && ref.current) {

package/src/components/index.ts

@@ -10,7 +10,6 @@ export { default as IconButton } from './IconButton';
 export { default as Key } from './Key';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
-export { default as LogoSplashScreen } from './LogoSplashScreen';
 export { default as Modal } from './Modal';
 export { default as NavButtons } from './NavButtons';
 export { default as NotFound } from './NotFound';
@@ -21,11 +20,7 @@ export { default as Radio } from './Radio';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
 export { default as SeoMessage } from './SeoMessage';
-export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
 export { default as Spinner } from './Spinner';
-export { default as SplashScreen } from './SplashScreen';
-export { default as SvgFontCss } from './SvgFontCss';
-export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';

package/src/hooks/index.ts

@@ -1,7 +1,13 @@
 export { default as useAppLayout } from './useAppLayout';
 export { default as useDirection } from './useDirection';
+export { default as useEffectOnce } from './useEffectOnce';
 export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';
+export { default as useLatest } from './useLatest';
 export { default as useLocalStorage } from './useLocalStorage';
+export { default as useMedia } from './useMedia';
+export { default as useMediaQueries } from './useMediaQueries';
 export { default as useMediaQuery } from './useMediaQuery';
+export { default as useOnWindowResize } from './useOnWindowResize';
 export { default as usePortal } from './usePortal';
+export { default as useViewportSize } from './useViewportSize';

package/src/hooks/useAppLayout.ts

@@ -1,30 +1,80 @@
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL, SOLVER_COLUMN_WIDTH } from 'parameters';
+/* eslint-disable max-statements */
+
+import {
+  BOARD_TILE_SIZE_MAX,
+  BOARD_TILE_SIZE_MIN,
+  BORDER_WIDTH,
+  BUTTON_HEIGHT,
+  COMPONENTS_SPACING,
+  COMPONENTS_SPACING_SMALL,
+  DICTIONARY_HEIGHT,
+  DICTIONARY_HEIGHT_MOBILE,
+  LOGO_ASPECT_RATIO,
+  LOGO_HEIGHT,
+  LOGO_HEIGHT_SMALL,
+  MODAL_HEADER_HEIGHT,
+  MODAL_WIDTH,
+  NAV_PADDING,
+  RACK_TILE_SIZE_MAX,
+  SOLVER_COLUMN_WIDTH,
+} from 'parameters';
+import { selectConfig, useTypedSelector } from 'state';
 
 import useIsTouchDevice from './useIsTouchDevice';
-import useMediaQuery from './useMediaQuery';
+import useMediaQueries from './useMediaQueries';
+import useViewportSize from './useViewportSize';
 
 const useAppLayout = () => {
+  const { viewportHeight, viewportWidth } = useViewportSize();
+  const config = useTypedSelector(selectConfig);
   const isTouchDevice = useIsTouchDevice();
-  const isLessThanXs = useMediaQuery('<xs');
-  const isLessThanS = useMediaQuery('<s');
-  const isLessThanM = useMediaQuery('<m');
-  const isLessThanL = useMediaQuery('<l');
-  const isLessThanXl = useMediaQuery('<xl');
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl } = useMediaQueries();
+  const isBoardFullWidth = isLessThanM;
+  const showResultCandidatePicker = isLessThanL;
+  const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
   const showColumn = !isLessThanL;
+  const columnWidth = showColumn ? SOLVER_COLUMN_WIDTH : 0;
+  const logoHeight = isLessThanL ? LOGO_HEIGHT_SMALL : LOGO_HEIGHT;
+  const navHeight = 2 * NAV_PADDING + logoHeight;
+  const solverHeight = viewportHeight - navHeight;
+  const solverWidth = viewportWidth;
+  const maxBoardWidth = solverWidth - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
+  const candidatePickerHeight = showResultCandidatePicker ? BUTTON_HEIGHT + componentsSpacing : 0;
+  const bottomContainerHeight = candidatePickerHeight + tileSize + 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth
+    ? Number.POSITIVE_INFINITY
+    : Math.max(solverHeight - bottomContainerHeight, 0);
+  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
+  const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
+  const cellSize = Math.min(Math.max(Math.min(cellWidth, cellHeight), BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
+  const boardSize = (cellSize + BORDER_WIDTH) * config.boardWidth + BORDER_WIDTH;
+  const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
+  const showResultsInModal = isLessThanL;
+  const dictionaryHeight = showResultsInModal ? DICTIONARY_HEIGHT_MOBILE : DICTIONARY_HEIGHT;
+  const modalWidth = isLessThanS ? viewportWidth : MODAL_WIDTH;
+  const resultsHeight = isLessThanL
+    ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
+    : boardSize - componentsSpacing - dictionaryHeight;
 
   return {
+    actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
     animateTile: !isLessThanXs,
-    columnWidth: showColumn ? SOLVER_COLUMN_WIDTH : 0,
-    componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
-    isBoardFullWidth: isLessThanM,
+    cellSize,
+    dictionaryHeight,
     isModalFullWidth: isLessThanS,
-    showColumn,
+    logoHeight,
+    logoWidth: logoHeight * LOGO_ASPECT_RATIO,
+    maxControlsWidth,
+    resultsHeight,
+    resultsWidth: isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH,
     showCompactControls: !showColumn,
     showFloatingSolveButton: isTouchDevice,
     showKeyMap: !isTouchDevice,
-    showResultsInModal: isLessThanL,
+    showResultsInModal,
     showShortNav: isLessThanS,
     showTilePoints: !isLessThanXs,
+    tileSize,
   };
 };
 

package/src/hooks/useDirection.ts

@@ -1,9 +1,9 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 import { noop } from 'lib';
 
 const useDirection = (direction: 'ltr' | 'rtl') => {
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.body.parentElement;
 
     if (!html) {

package/src/hooks/useEffectOnce.ts

@@ -0,0 +1,5 @@
+import { EffectCallback, useEffect } from 'react';
+
+const useEffectOnce = (effect: EffectCallback) => useEffect(effect, []);
+
+export default useEffectOnce;

package/src/hooks/useIsTouchDevice.ts

@@ -1,4 +1,4 @@
-import { useMedia } from 'react-use';
+import useMedia from './useMedia';
 
 const useIsTouchDevice = () => {
   return useMedia('(hover: none)', false);

package/src/hooks/useLanguage.ts

@@ -1,9 +1,9 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 import { noop } from 'lib';
 
 const useLanguage = (language: string) => {
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.body.parentElement;
 
     if (!html) {

package/src/hooks/useLatest.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+interface Latest<T> {
+  readonly current: T;
+}
+
+const useLatest = <T>(value: T): Latest<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};
+
+export default useLatest;

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+
+import {
+  localStorage,
+  selectAutoGroupTiles,
+  selectBoard,
+  selectConfigId,
+  selectLocale,
+  selectRack,
+  useTypedSelector,
+} from 'state';
+
+const useLocalStorage = () => {
+  const autoGroupTiles = useTypedSelector(selectAutoGroupTiles);
+  const board = useTypedSelector(selectBoard);
+  const configId = useTypedSelector(selectConfigId);
+  const locale = useTypedSelector(selectLocale);
+  const rack = useTypedSelector(selectRack);
+
+  useEffect(() => {
+    if (autoGroupTiles) {
+      localStorage.setAutoGroupTiles(autoGroupTiles);
+    }
+  }, [autoGroupTiles]);
+
+  useEffect(() => {
+    if (board) {
+      localStorage.setBoard(board);
+    }
+  }, [board]);
+
+  useEffect(() => {
+    if (configId) {
+      localStorage.setConfigId(configId);
+    }
+  }, [configId]);
+
+  useEffect(() => {
+    if (locale) {
+      localStorage.setLocale(locale);
+    }
+  }, [locale]);
+
+  useEffect(() => {
+    if (rack) {
+      localStorage.setRack(rack);
+    }
+  }, [rack]);
+};
+
+export default useLocalStorage;

package/src/hooks/useMedia.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+const getInitialState = (query: string, defaultState?: boolean) => {
+  if (typeof defaultState !== 'undefined') {
+    return defaultState;
+  }
+
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.matchMedia(query).matches;
+};
+
+const useMedia = (query: string, defaultState?: boolean) => {
+  const [state, setState] = useState(getInitialState(query, defaultState));
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    const handleChange = () => {
+      setState(mediaQuery.matches);
+    };
+
+    setState(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return state;
+};
+
+export default useMedia;

package/src/hooks/useMediaQueries.ts

@@ -0,0 +1,13 @@
+import useMediaQuery from './useMediaQuery';
+
+const useMediaQueries = () => {
+  const isLessThanXs = useMediaQuery('<xs');
+  const isLessThanS = useMediaQuery('<s');
+  const isLessThanM = useMediaQuery('<m');
+  const isLessThanL = useMediaQuery('<l');
+  const isLessThanXl = useMediaQuery('<xl');
+
+  return { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl };
+};
+
+export default useMediaQueries;

package/src/hooks/useMediaQuery.ts

@@ -1,8 +1,9 @@
 import { buildMediaQuery } from 'include-media-query-builder';
-import { useMedia } from 'react-use';
 
 import { BREAKPOINTS } from 'parameters';
 
+import useMedia from './useMedia';
+
 const useMediaQuery = (query: string | string[], defaultState?: boolean | undefined): boolean => {
   const mediaQuery = buildMediaQuery(BREAKPOINTS, query);
   return useMedia(mediaQuery, defaultState);

package/src/hooks/useOnWindowResize.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useOnWindowResize = (onResize: (event: Event) => void) => {
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [onResize]);
+};
+
+export default useOnWindowResize;

package/src/hooks/useViewportSize.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+import useOnWindowResize from './useOnWindowResize';
+
+const useViewportSize = () => {
+  const [viewportHeight, setViewportHeight] = useState(typeof window === 'undefined' ? 0 : window.innerHeight);
+  const [viewportWidth, setViewportWidth] = useState(typeof window === 'undefined' ? 0 : window.innerWidth);
+
+  const handleWindowResize = useCallback(() => {
+    setViewportHeight(window.innerHeight);
+    setViewportWidth(window.innerWidth);
+  }, []);
+
+  useOnWindowResize(handleWindowResize);
+
+  return { viewportHeight, viewportWidth };
+};
+
+export default useViewportSize;