import { useMediaQuery } from '../useMediaQuery' ; export * from './breakpoints' ; import { _window } from '../_ssr.config' ; export type BreakPoints = Record < string , number > ; function match ( query ) { if ( ! _window ) return false ; return _window . matchMedia ( query ) . matches ; } param { string } breakpoints returns see https export function BreakPointHooks ( breakpoints ) { return { param k { string } returns see https useGreater : ( k ) => { return useMediaQuery ( `(min-width: ${ breakpoints [ k ] }px)` ) ; } , param k { string } param k { string } returns see https useSmaller : ( k ) => { return useMediaQuery ( `(max-width: ${ breakpoints [ k ] }px)` ) ; } , param a { string } param b { string } returns see https useBetween : ( a , b ) => { return useMediaQuery ( `(min-width: ${ breakpoints [ a ] }px) and (max-width: ${ breakpoints [ b ] }px)` ) ; } , param k { string } see https isGreater ( k ) { return match ( `(min-width: ${ breakpoints [ k ] }px)` ) ; } , param k { string } see https isSmaller ( k ) { return match ( `(max-width: ${ breakpoints [ k ] }px)` ) ; } , param k { string } see https isInBetween ( a , b ) { return match ( `(min-width: ${ breakpoints [ a ] }px) and (max-width: ${ breakpoints [ b ] }px)` ) ; } } ; } export type BreakPointHooksReturn = ReturnType < typeof BreakPointHooks > ;