A simplified version of media queries in the browser. Currently supports minWidth, maxWidth, minHeight, maxHeight, and orientation to detect landscape or portrait modus. The hook is typescript first.
npm
$ npm i react-native-media-query-hookyarn
$ yarn add react-native-media-query-hookimport
import useMediaQuery from 'react-native-media-query-hook';basic
// The outcome results in a boolean statement.
const isSmallScreen = useMediaQuery({
maxWidth: 480,
});more sophisticated queries
// Detect different screen sizes
const isSmallScreen = useMediaQuery({
maxWidth: 480,
});
const isMediumScreen = useMediaQuery({
minWidth: 481,
maxWidth: 1024,
});
const islargeScreen = useMediaQuery({
minWidth: 1025,
});
// Detect portrait / landscape mode
const isPortrait = useMediaQuery({
orientation: 'portrait',
});
const isLandscape = useMediaQuery({
orientation: 'landscape',
});
// Put it all together
const isMediumPortraitScreen = useMediaQuery({
minWidth: 481,
maxWidth: 1024,
minHeight: 481,
maxHeight: 1200,
orientation: 'portrait',
});Issues reports are more than welcome. The best way to report a problem is to add a reproduction of the error with a code example.
Pull requests are also very welcome. This way we can extend the library quicker with everybody's needs. If you have ideas about the interface, lets discuss it in an issue ticket.
react-native-media-query-hook is MIT licensed.