import React from 'react' ; import { tokens } from '@sparkpost/design-tokens' ; import { getWindow , isBrowser } from '../helpers/window' ; import { Breakpoints } from '../helpers/types' ; const queries = [ `(min-width: ${ tokens . mediaQuery_xl })` , `(min-width: ${ tokens . mediaQuery_lg })` , `(min-width: ${ tokens . mediaQuery_md })` , `(min-width: ${ tokens . mediaQuery_sm })` , `(min-width: ${ tokens . mediaQuery_xs })` , ] ; const keys = [ 'xl' , 'lg' , 'md' , 'sm' , 'xs' ] ; example see https function useBreakpoint ( ) { if ( ! isBrowser ( ) ) { return 'default' ; } const environment = getWindow ( ) ; const list = queries . map ( ( q ) => environment . matchMedia ( q ) ) ; function getValue ( ) { const index = list . findIndex ( ( mql ) => mql . matches ) ; return typeof keys [ index ] !== 'undefined' ? keys [ index ] : 'default' ; } const [ value , setValue ] = React . useState < Breakpoints > ( getValue ) ; React . useEffect ( ( ) => { const handler = ( ) => setValue ( getValue ) ; list . forEach ( ( mql ) => mql . addEventListener ? mql . addEventListener ( 'change' , handler ) : mql . addListener ( handler ) ) ; return ( ) => list . forEach ( ( mql ) => mql . addEventListener ? mql . removeEventListener ( 'change' , handler ) : mql . removeListener ( handler ) ) ; } , [ ] ) ; return value ; } export default useBreakpoint ;