Eric Bailey
29 lines
759 B
TypeScript
29 lines
759 B
TypeScript
import {useMemo} from 'react'
|
|
import {useMediaQuery} from 'react-responsive'
|
|
|
|
export type Breakpoint = 'gtPhone' | 'gtMobile' | 'gtTablet'
|
|
|
|
export function useBreakpoints(): Record<Breakpoint, boolean> & {
|
|
activeBreakpoint: Breakpoint | undefined
|
|
} {
|
|
const gtPhone = useMediaQuery({minWidth: 500})
|
|
const gtMobile = useMediaQuery({minWidth: 800})
|
|
const gtTablet = useMediaQuery({minWidth: 1300})
|
|
return useMemo(() => {
|
|
let active: Breakpoint | undefined
|
|
if (gtTablet) {
|
|
active = 'gtTablet'
|
|
} else if (gtMobile) {
|
|
active = 'gtMobile'
|
|
} else if (gtPhone) {
|
|
active = 'gtPhone'
|
|
}
|
|
return {
|
|
activeBreakpoint: active,
|
|
gtPhone,
|
|
gtMobile,
|
|
gtTablet,
|
|
}
|
|
}, [gtPhone, gtMobile, gtTablet])
|
|
}
|