Skip to content

Instantly share code, notes, and snippets.

@danielgek
Created September 22, 2020 12:29
Show Gist options
  • Save danielgek/626738a8e0e64526310517b3c5d9c9ea to your computer and use it in GitHub Desktop.
Save danielgek/626738a8e0e64526310517b3c5d9c9ea to your computer and use it in GitHub Desktop.
// 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment