homework
npm install @reigen06/react-responsiveuseMediaQuery.ts
tsx
import React from 'react'
import { useMediaQuery } from '@my-npm-user/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
MediaQuery.tsx
`tsx
import React from 'react'
import MediaQuery from '@my-npm-user/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
}
)
`
Ожидаемые props этого компонента:
`
orientation
minResolution
maxResolution
minWidth
maxWidth
minHeight
maxHeight
``