@zohodesk/hooks/es/responsive/useMediaQuery.js

Unified Component Library - Hooks

import React, { useEffect, useState } from 'react';

function getMatches(query) {
  // Prevents SSR issues
  if (typeof window !== 'undefined') {
    return window.matchMedia(query).matches;
  }

  return false;
}

export default function useMediaQuery(query, callback) {
  const [matches, setMatches] = useState(getMatches(query));

  function handleChange(event) {
    setMatches(getMatches(query));
    callback && callback();
  }

  useEffect(() => {
    const matchMedia = window.matchMedia(query); // Triggered at the first client-side load and if query changes
    // handleChange();
    // Listen matchMedia

    matchMedia.addEventListener('change', handleChange);
    return () => {
      matchMedia.removeEventListener('change', handleChange);
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query]);
  return matches;
}
/*

  let isMatched = useMediaQuery("(min-width: 768px)", function(){
    console.log("Media size changed now....")
  });
  console.log(" Media size ===> ", isMatched);

  let isMatched1 = useMediaQuery("(prefers-color-scheme: dark)", function(){
    console.log("dark changed now....")
  });
  console.log(" theme ===> ", isMatched1);

  let isMatched2 = useMediaQuery("(hover: hover)", function(){
    console.log("  hover changed now....", isMatched2)
  });
  console.log(" hover ===> ", isMatched2);

  */