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 value	Type	Description
query	string	The media query to signal on. Example, "print" will signal true when previewing in print mode, and false otherwise

Returns

Return value	Type	Description
isMatch	Boolean	Whether 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.