Skip to main content
Version: 5.6.1

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 />);

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.