Skip to main content

useMediaQuery

Ease with media query

Usage

Live Editor

function Demo() {
  const isWide = useMediaQuery("(min-width: 480px)");

  return <div>Screen is wide: {isWide ? "Yes" : "No"}</div>;
};

Result
Loading...

API

useMediaQuery

Returns

boolean: whether comply with media inquiries

Arguments

ArgumentDescriptionTypeDefaultValue
querymedia query stringstring (Required)-
defaultStatedefault valueboolean | undefined-