use min-width hook alternative for resize calculation

useMinWidth.ts

/**
 *  Use:
 *  const isMobile = useMinWidth('700px');
 *  
 */

import { useState, useEffect } from 'react';

export function useMinWidth(_width: string): boolean {

   if (!_width) return false;

   const x = window.matchMedia(`(min-width: ${_width})`)

   const [isMobile, setIsMobile] = useState(!x.matches)

   useEffect(() => {

      const handleChange = (e: MediaQueryListEvent) => {
         setIsMobile(!e.matches);
      }

      x.addEventListener('change', handleChange);

      return () => {
         x.removeEventListener('change', handleChange);
      }

   }, [x])

   return isMobile;
}