I want to store Media Queries in a separate file to be able to reuse in other files.
import { useMediaQuery } from 'react-responsive'
const MediaQueries = () => {
const isDesktopOrLaptop = useMediaQuery({
query: '(min-width: 810px)'
})
const isLargerThanMobile = useMediaQuery({ query: '(min-width: 480px)' })
const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 480px)' })
const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
}
export default MediaQueries
I've tried importing the values below to other files and using the various media queries, and it doesn't work.
import MediaQueries from '../media-query/MediaQueries'
...
MediaQueries.isLargerThanMobile