React hook and component for working with the https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
npm install @milya505/react-usemediaquery
npm i @milya505/react-usemediaquery
`
Usage
---
#### 1. Example usage of the hook:
`jsx
import React from "react";
import { useMediaQuery } from "@my-npm-user/react-responsive";
const Example = () => {
const isDesktopOrLaptop = useMediaQuery({
query: "(min-width: 1224px)",
});
const isBigScreen = useMediaQuery({ query: "(min-width: 1824px)" });
const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });
return (
Device Test!
{isDesktopOrLaptop && You are a desktop or laptop
}
{isBigScreen && You have a huge screen
}
{isTabletOrMobile && You are a tablet or mobile phone
}
Your are in {isPortrait ? "portrait" : "landscape"} orientation
{isRetina && You are retina
}
);
};
`
#### 2. Example usage of the component:
`jsx
import React from "react";
import MediaQuery from "@my-npm-user/react-responsive";
const Example = () => (
Device Test!
You are a desktop or laptop
You also have a huge screen
{" "}
{/ @media (-webkit-min-device-pixel-ratio: 2) /}
{/ You can also use a function (render prop) as a child /}
{(matches) =>
matches ? You are retina
: You are not retina
}
);
`
##### Note:
Expected props of this component:
`
orientation
minResolution
maxResolution
minWidth
maxWidth
minHeight
maxHeight
`
Props minResolution and maxResolution can be assigned a value in the format of {number}dppx or a simple number`