@nodeject/ui-components
Version:
UI library for non-trivial components
42 lines (41 loc) • 2.31 kB
JavaScript
import { useMediaQuery } from 'react-responsive';
var widths = {
bigScreen: 1824,
laptopMaxWidth: 1280,
mobileLandscape: 480,
tabletMaxWidth: 1024,
tabletMinWidthLandscape: 992,
tabletMinWidthPortrait: 768,
};
export var useMediaQueries = function () {
var isDesktop = useMediaQuery({ query: "(min-width: " + (widths.tabletMaxWidth + 1) + "px)" });
var isLaptop = useMediaQuery({ query: "(min-width: " + (widths.tabletMaxWidth + 1) + "px) and (max-width: " + widths.laptopMaxWidth + "px)" });
var isTabletLandscapeAtLeast = useMediaQuery({ query: "(min-width: " + widths.tabletMinWidthLandscape + "px)" });
var isTabletLandscape = useMediaQuery({ query: "(min-width: " + widths.tabletMinWidthLandscape + "px) and (max-width: " + widths.tabletMaxWidth + "px)" });
var isTabletPortrait = useMediaQuery({ query: "(min-width: " + widths.tabletMinWidthPortrait + "px) and (max-width: " + widths.tabletMaxWidth + "px)" });
var isMobileLandscape = useMediaQuery({ query: "(min-width: " + (widths.mobileLandscape + 1) + "px) and (max-width: " + (widths.tabletMinWidthPortrait - 1) + "px)" });
var isMobilePortrait = useMediaQuery({ query: "(max-width: " + widths.mobileLandscape + "px)" });
var isDesktopOrLaptop = isDesktop && isLaptop;
var isTablet = isTabletPortrait || isTabletLandscape;
var isMobile = isMobilePortrait || isMobileLandscape;
var isBigScreen = useMediaQuery({ query: "(min-device-width: " + widths.bigScreen + "px)" });
var isLandscape = useMediaQuery({ query: "(orientation: landscape)" });
var isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
var isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });
return {
isBigScreen: isBigScreen,
isDesktop: isDesktop,
isDesktopOrLaptop: isDesktopOrLaptop,
isLandscape: isLandscape,
isLaptop: isLaptop,
isMobile: isMobile,
isMobileLandscape: isMobileLandscape,
isMobilePortrait: isMobilePortrait,
isPortrait: isPortrait,
isRetina: isRetina,
isTablet: isTablet,
isTabletLandscape: isTabletLandscape,
isTabletLandscapeAtLeast: isTabletLandscapeAtLeast,
isTabletPortrait: isTabletPortrait
};
};