React utilities for easy access to MediaQueryList API. For learning purposes only!
npm install @artikool5/react-responsiveReact hook and component for easy access to MediaQueryList functionality.
> [!CAUTION]
> For learning purposes only!
useMediaQuery(queryObject) returns
- matches: boolean - whether browser media matches passed media query.
queryObject - an object containing a field "query" that is a valid media query.
``tsx
function App() {
const isDesktopOrLaptop = useMediaQuery({ query: "(min-width: 1200px)" });
const isBigScreen = useMediaQuery({ query: "(min-width: 1800px)" });
const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1200px)" });
const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });
return (
This is a desktop or a laptop
}Also, you have a huge screen!
}You are using tablet or a phone
}
This devise is in {isPortrait ? "portrait" : "landscape"} orientation
This devise has a retina display
}$3
tsx
function App() {
return (
<>
Device Test!
This is a desktop or a laptop
Also, you have a huge screen!
You are using tablet or a phone
This devise is in portrait orientation
This devise is in landscape orientation
{(matches) =>
matches ? You are retina
: You are not retina
}
);
}
``