You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
778 B
37 lines
778 B
import type { ReactNode } from 'react'
|
|
import { Fragment } from 'react'
|
|
|
|
import type { Devices } from 'config'
|
|
|
|
import { getQuery } from './helpers'
|
|
import { useMediaQuery } from './hooks'
|
|
|
|
export * from './hooks'
|
|
|
|
type Props = {
|
|
children: ReactNode,
|
|
|
|
/** работает так же, как медиа запрос (max-width: width) */
|
|
maxDevice?: Devices,
|
|
|
|
/** работает так же, как медиа запрос (min-width: width) */
|
|
minDevice?: Devices,
|
|
}
|
|
|
|
export const MediaQuery = ({
|
|
children,
|
|
maxDevice,
|
|
minDevice,
|
|
}: Props) => {
|
|
const query = getQuery(maxDevice, minDevice)
|
|
const queryMatches = useMediaQuery(query)
|
|
return (
|
|
<Fragment>
|
|
{
|
|
queryMatches
|
|
? children
|
|
: null
|
|
}
|
|
</Fragment>
|
|
)
|
|
}
|
|
|