src/hooks/useLayoutType.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { useMediaQuery } from '@mui/material';
import { useEffect, useState } from 'react';

export default function useLayoutType() {
  const [layoutType, setLayoutType] = useState('unset');
  const isMediaQueryRuleActive = useMediaQuery('(max-width:800px)');

  useEffect(() => {
    if (isMediaQueryRuleActive) {
      setLayoutType('mobile');
    } else {
      setLayoutType('desktop');
    }
  }, [isMediaQueryRuleActive]);

  return layoutType;
}