How do I export Media Queries in React?

Viewed 24

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
0 Answers
Related