for using MediaQueryList
npm install @vladsilav68/react-responsivejavascript
npm i @vladsilav68/react-responsive
`
$3
`javascript
import { MediaQuery } from '@vladsilav68/react-responsive'
`
$3
`javascript
import { useMediaQuery } from '@vladsilav68/react-responsive'
`
$3
`javascript
import { useMediaQuery } from '@vladsilav68/react-responsive'
const Example = () => {
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
Device Test!
{isDesktopOrLaptop && You are a desktop or laptop
}
{isBigScreen && You have a huge screen
}
{isTabletOrMobile && You are a tablet or mobile phone
}
Your are in {isPortrait ? 'portrait' : 'landscape'} orientation
{isRetina && You are retina
}
}
`
$3
`javascript
import { MediaQuery } from '@vladsilav68/react-responsive'
const Example = () => (
Device Test!
You are a desktop or laptop
You also have a huge screen
Your are in portrait orientation
You are retina (props -- string)
You are retina (props -- number)
)
``