zidniryi

App.js

Apr 19th, 2021
1,150
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { useMediaQuery } from "react-responsive";
  2.  
  3. function App() {
  4.   const isDesktopOrLaptop = useMediaQuery({
  5.     query: "(min-device-width: 1224px)",
  6.   });
  7.   const isBigScreen = useMediaQuery({ query: "(min-device-width: 1824px)" });
  8.   const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
  9.   const isTabletOrMobileDevice = useMediaQuery({
  10.     query: "(max-device-width: 1224px)",
  11.   });
  12.   const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
  13.   const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });
  14.   return (
  15.     <div className="App">
  16.       <hr />
  17.       <div>
  18.         <h1>Device Test!</h1>
  19.         {isDesktopOrLaptop && (
  20.           <>
  21.             <p>You are a desktop or laptop</p>
  22.             {isBigScreen && <p>You also have a huge screen</p>}
  23.             {isTabletOrMobile && (
  24.               <p>You are sized like a tablet or mobile phone though</p>
  25.             )}
  26.           </>
  27.         )}
  28.         {isTabletOrMobileDevice && <p>You are a tablet or mobile phone</p>}
  29.         <p>Your are in {isPortrait ? "portrait" : "landscape"} orientation</p>
  30.         {isRetina && <p>You are retina</p>}
  31.       </div>
  32.     </div>
  33.   );
  34. }
  35.  
  36. export default App;
  37.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×