@maroun-baydoun/use-media-query

Listen to media query matches in React

Install

npm i @maroun-baydoun/use-media-query

Or

yarn add @maroun-baydoun/use-media-query

expects react >= 16.8.0 to be installed as a peer dependency.

Use

import useMediaQuery from "@maroun-baydoun/use-media-query";

const MyComponent = () => {

    const matches = useMediaQuery("only screen and (min-width: 1024px)");

    return matches ? "It matches!" : "No match (yet)";
}

Browser Compatibility

This library relies on the window.matchMedia API. Compatible browsers can be found here.