media.ts

// all credits go to https://github.com/AnthonySLWhite 

import { screens } from 'styles/theme';
import { useMediaSet } from 'use-media-set';

export type MediaProps<T extends string> = {
  [key in T]: {
    minWidth?: number | string;
    minHeight?: number | string;
    maxWidth?: number | string;
    maxHeight?: number | string;
    type?: 'screen' | 'print';
  };
};

type ScreenKeys = keyof typeof screens;

// Transforms screens object into a usable query object
const parsedScreensQuery = {} as MediaProps<ScreenKeys>;

// All screen keys
const screenKeys = Object.keys(screens);

Object.keys(screens).forEach((screen) => {
  parsedScreensQuery[screen] = { minWidth: screens[screen] };
});

function useMediaQuery<T extends string>(queries?: MediaProps<T>): null | { [key in ScreenKeys | T]: boolean } {
  const dataToReturn = {} as { [key in ScreenKeys | T]: boolean };

  // All query keys joined with screen keys for later use
  const queryKeys = [...Object.getOwnPropertyNames(queries), ...screenKeys];
  try {
    const data = useMediaSet({
      ...parsedScreensQuery,
      ...queries,
    });

    queryKeys.forEach((query) => {
      dataToReturn[query] = data.has(query);
    });

    return dataToReturn;
  } catch (error) {
    return null;
  }
}

export default useMediaQuery;