import "../useMobile.css";
import { useState, useEffect } from "react";
const breakpointMobile = "768px";
const styles = {
  breakpointMobile
};
const MOBILE_BREAKPOINT = styles.breakpointMobile;
const queries = window.matchMedia(`only screen and (max-width: ${MOBILE_BREAKPOINT})`);
const useMobile = () => {
  const [isMobile, setIsMobile] = useState(queries.matches);
  useEffect(() => {
    const onChange = () => setIsMobile(queries.matches);
    queries.addEventListener("change", onChange);
    return () => {
      queries.removeEventListener("change", onChange);
    };
  }, []);
  return isMobile;
};
export {
  MOBILE_BREAKPOINT,
  useMobile as default
};
