34 lines
728 B
JavaScript
34 lines
728 B
JavaScript
import { useMedia } from "react-media";
|
|
|
|
function useResponsiveLayout() {
|
|
const isMediumScreen = useMedia({ query: "(min-width: 500px)" });
|
|
const isLargeScreen = useMedia({ query: "(min-width: 1500px)" });
|
|
const screenSize = isLargeScreen
|
|
? "large"
|
|
: isMediumScreen
|
|
? "medium"
|
|
: "small";
|
|
|
|
const modalSize = isLargeScreen
|
|
? "842px"
|
|
: isMediumScreen
|
|
? "642px"
|
|
: "500px";
|
|
|
|
const tileSize = isLargeScreen
|
|
? "small"
|
|
: isMediumScreen
|
|
? "medium"
|
|
: "large";
|
|
|
|
const gridTemplate = isLargeScreen
|
|
? "1fr 1fr 1fr 1fr"
|
|
: isMediumScreen
|
|
? "1fr 1fr 1fr"
|
|
: "1fr 1fr";
|
|
|
|
return { screenSize, modalSize, tileSize, gridTemplate };
|
|
}
|
|
|
|
export default useResponsiveLayout;
|