domain-watchdog/assets/hooks/useBreakpoint.tsx
2024-12-31 13:55:42 +01:00

21 lines
580 B
TypeScript

import type {Breakpoint} from 'antd'
import { theme} from 'antd'
import {useMediaQuery} from 'react-responsive'
const {useToken} = theme
type ScreenProperty = 'screenXXL' | 'screenXL' | 'screenLG' | 'screenMD' | 'screenSM' | 'screenXS'
const propertyName = (breakpoint: Breakpoint): ScreenProperty => {
return 'screen' + breakpoint.toUpperCase() as ScreenProperty
}
export default function useBreakpoint(
breakpoint: Breakpoint
) {
const {token} = useToken()
const width: number = token[propertyName(breakpoint)]
return useMediaQuery({maxWidth: width})
}