react hook и компонент для работы с MediaQueryList
npm install @volkov190/react-responsivets
import React from 'react'
import { useMediaQuery } from '@volkov190/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
}
}
`
#### компонент
`ts
import React from 'react'
import MediaQuery from '@volkov190/react-responsive'
const Example = () => (
Device Test!
You are a desktop or laptop
You also have a huge screen
{/ @media (-webkit-min-device-pixel-ratio: 2) /}
{/ You can also use a function (render prop) as a child /}
{(matches) =>
matches
? You are retina
: You are not retina
}
)
``