media-query-react-ts

Installation

First, in your terminal while in the root directory of your project:

npm i media-query-react-ts

Usage

Then you can import the react component:

import MediaQuery from "media-query-react-ts";

Usage example:

<MediaQuery minResolution={2}>
  {(matches: boolean) =>
    matches ? <p>You are retina</p> : <p>You are not retina</p>
  }
</MediaQuery>

or

<MediaQuery minWidth={1824}>
  <p>You also have a huge screen</p>
</MediaQuery>

And you can also import as a hook:

import { useMediaQuery } from "media-query-react-ts";

Usage example:

const isDesktopOrLaptop = useMediaQuery({ query: "(min-width: 1224px" });