Skip to main content
Version: 5.0.2

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.