\n
Device Test!
\n {isDesktopOrLaptop &&
You are a desktop or laptop
}\n {isBigScreen &&
You have a huge screen
}\n {isTabletOrMobile &&
You are a tablet or mobile phone
}\n
Your are in {isPortrait ? 'portrait' : 'landscape'} orientation
\n {isRetina &&
You are retina
}\n
...
\n}\n```\n\n### Forcing a device with the `device` prop\n\nAt times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.\n\n#### Possible Keys\n\n`orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,\n`height`, `deviceHeight`, `width`, `deviceWidth`, `color`, `colorIndex`, `monochrome`,\n`resolution` and `type`\n\n##### Possible Types\n\n`type` can be one of: `all`, `grid`, `aural`, `braille`, `handheld`, `print`, `projection`,\n`screen`, `tty`, `tv` or `embossed`\n\nNote: The `device` property always applies, even when it can be detected (where window.matchMedia exists).\n\n```jsx\nimport { useMediaQuery } from 'react-responsive'\n\nconst Example = () => {\n const isDesktopOrLaptop = useMediaQuery(\n { minDeviceWidth: 1224 },\n { deviceWidth: 1600 } // `device` prop\n )\n\n return (\n \n {isDesktopOrLaptop && (\n
\n this will always get rendered even if device is shorter than 1224px,\n that's because we overrode device settings with 'deviceWidth: 1600'.\n
\n )}\n
...
\n}\n```\n\n```jsx\nimport React from 'react'\nimport MediaQuery from 'react-responsive'\n\nconst Example = () => {\n const handleMediaQueryChange = (matches) => {\n // matches will be true or false based on the value for the media query\n }\n\n return (\n