Code/React Hooks/useValueFromScreenSize

useValueFromScreenSize

A custom React hook that receives an object holding values for screen sizes and returns the value for the current screensize. If fallDown (optional) is true then the value of the next screen size down is returned until a value is found.

useValueFromScreenSize Hook

ReactTypeScript

tsx

import { useEffect, useState } from 'react';

export type ScreenSize = 'base' | 'sm' | 'md' | 'lg' | 'xl';

export type ScreenSizeMap<T = unknown> = Partial<Record<ScreenSize, T>>;

function getScreenSize(width: number): ScreenSize {
  if (width < 512) return 'base';
  if (width < 768) return 'sm';
  if (width < 1024) return 'md';
  if (width < 1280) return 'lg';
  return 'xl';
}

function getClosestValueFromScreenSize<T>(values: ScreenSizeMap<T>, width: number): unknown {
  if (width >= 1280 && values['xl'] !== undefined) {
    return values['xl'];
  }
  if (width >= 1024 && values['lg'] !== undefined) {
    return values['lg'];
  }
  if (width >= 768 && values['md'] !== undefined) {
    return values['md'];
  }
  if (width >= 512 && values['sm'] !== undefined) {
    return values['sm'];
  }
  if (values['base'] !== undefined) {
    return values['base'];
  }

  return null;
}
  

export function useValueFromScreenSize<T = unknown>(values: ScreenSizeMap<T>, fallDown?: boolean): unknown {
  const [value, setValue] = useState<unknown>(() => getClosestValueFromScreenSize(values, window.innerWidth));

  useEffect(() => {
    const handleResize = () => {
      const screenSize = getScreenSize(window.innerWidth);
      if (fallDown) {
        setValue(getClosestValueFromScreenSize(values, window.innerWidth));
      } else {
        setValue(values[screenSize] || null);
      }
    }

    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize)
  }, [setValue, values, fallDown]);

  return value;
}