Skip to main content
Version: Next

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.