React - react-responsive

Стек: React, typescript, сборка - microbundle/rollup

Реализовать react hook и компонент для работы с https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

$3

useMediaQuery.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
``

Дополнительно:
- Типизировать minResolution, чтобы можно было указать либо строку вида "{число}dppx", либо просто number (то есть чтобы и так и так можно было, а строка только определённого вида)