Skip to main content
Version: 5.7.3

useMediaMatch

About​

Signal whether or not a media query is currently matched.

Installation​

npm install --save rooks

Importing the hook​

import { useMediaMatch } from "rooks";

Usage​

function Demo() {
const isNarrowWidth = useMediaMatch("(max-width: 600px)");
return <span>Your screen is {isNarrowWidth ? "narrow" : "wide"}</span>;
}

render(<Demo />);

Arguments​

Argument valueTypeDescription
querystringThe media query to signal on. Example, "print" will signal true when previewing in print mode, and false otherwise

Returns​

Return valueTypeDescription
isMatchBooleanWhether or not the media query is currently matched

Codesandbox Examples​

Basic Usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.