Reactopia | Reusable React developer tools

Introduction

Subscribe to a CSS media query and re-render when it changes. Useful for responsive layouts without duplicating breakpoint logic in CSS only.

Platform: React (browser). Dependencies: react only.

Hook

import { useEffect, useState } from "react";

export function useMediaQuery(query: string): boolean {
  const getMatches = () =>
    typeof window !== "undefined" ? window.matchMedia(query).matches : false;

  const [matches, setMatches] = useState(getMatches);

  useEffect(() => {
    const mql = window.matchMedia(query);
    const onChange = () => setMatches(mql.matches);
    onChange();
    mql.addEventListener("change", onChange);
    return () => mql.removeEventListener("change", onChange);
  }, [query]);

  return matches;
}

Example

tsx

const isMdUp = useMediaQuery("(min-width: 768px)");

Footer

Match the same breakpoints you use in Tailwind (sm, md, lg) for consistent behavior.