Measure the Screen Size Using react-responsive
react-responsive is a lightweight and straightforward package that enables you to do media queries by using the useMediaQuery
hook. It helps measure screen size and other screen features, making it an essential tool for responsive web development.
Installation
bashnpm install react-responsive
Usage
jsximport React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
const isMobile = useMediaQuery({ query: '(max-width: 768px)' })
const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' })
const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
const isTabletOrMobile = useMediaQuery({ query: '(max-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 have a huge screen</p>}
{isTabletOrMobile && <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>
}
Wrapping Components
jsximport MediaQuery from 'react-responsive'
const Example = () => (
<div>
<h1>Device Test!</h1>
<MediaQuery minWidth={1224}>
<p>You are a desktop or laptop</p>
<MediaQuery minWidth={1824}>
<p>You also have a huge screen</p>
</MediaQuery>
</MediaQuery>
<MediaQuery minResolution="2dppx">
{/* You can also use a function (render prop) as a child */}
{(matches) =>
matches
? <p>You are retina</p>
: <p>You are not retina</p>
}
</MediaQuery>
</div>
)