Skip to content

Instantly share code, notes, and snippets.

@jharris711
Created March 7, 2023 21:41
useMediaQuery React hook
import { useState, useEffect } from "react";
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(false);
useEffect(() => {
const mediaQuery = window.matchMedia(query);
setMatches(mediaQuery.matches);
const listener = () => {
setMatches(mediaQuery.matches);
};
mediaQuery.addEventListener("change", listener);
return () => {
mediaQuery.removeEventListener("change", listener);
};
}, [query]);
return matches;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment