Skip to main content
Version: 5.6.0

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.