Skip to content

A simplified version of the media queries in css. Currently supports minWidth, maxWidth, minHeight, maxHeight, and orientation to detect landscape or portrait modus.

License

Notifications You must be signed in to change notification settings

idlework/react-native-media-query-hook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-media-query-hook

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.

Installation

npm

$ npm i react-native-media-query-hook

yarn

$ yarn add react-native-media-query-hook

How to use

import

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',
});

Contributing

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.

License

react-native-media-query-hook is MIT licensed.