Created
February 29, 2020 16:09
-
-
Save RishikeshVedpathak/b1fadf904e61803b7256de3dd5579f62 to your computer and use it in GitHub Desktop.
react-responsive use case
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import { useMediaQuery } from 'react-responsive' | |
| const Example = () => { | |
| const isDesktopOrLaptop = useMediaQuery({ | |
| query: '(min-device-width: 1224px)' | |
| }) | |
| const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' }) | |
| const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' }) | |
| const isTabletOrMobileDevice = useMediaQuery({ | |
| query: '(max-device-width: 1224px)' | |
| }) | |
| const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) | |
| const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' }) | |
| return ( | |
| <div> | |
| <h1>Device Test!</h1> | |
| {isDesktopOrLaptop && <> | |
| <p>You are a desktop or laptop</p> | |
| {isBigScreen && <p>You also have a huge screen</p>} | |
| {isTabletOrMobile && <p>You are sized like a tablet or mobile phone though</p>} | |
| </>} | |
| {isTabletOrMobileDevice && <p>You are a tablet or mobile phone</p>} | |
| <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p> | |
| {isRetina && <p>You are retina</p>} | |
| </div> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment