revamp template

src/hooks/useMediaQuery.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+const getMatches = (query: string): boolean => {
+  // Prevents SSR issues
+  if (typeof window !== 'undefined') {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+};
+
+const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  useEffect(() => {
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+};
+
+export { useMediaQuery };