jsx import { jsx } from '@emotion/core' ; import React , { ReactFragment , useEffect , useState } from 'react' ; import { QUERY , QueryKeys } from '../mediaQueries' ; type Query = string | QueryKeys ; export interface MatchMediaProps extends React . HTMLProps < ReactFragment > { not ? : boolean ; query : Query ; } export const useMatchMedia = ( query ) => { const matchMedia = window . matchMedia ( `(${ query })` ) ; const [ isMatching , setIsMatching ] = useState ( matchMedia . matches ) ; const updateMatching = ( ) => setIsMatching ( matchMedia . matches ) ; useEffect ( ( ) => { matchMedia . addListener ( updateMatching ) ; return ( ) => matchMedia . removeListener ( updateMatching ) ; } ) ; return isMatching ; } ; export const MatchMedia = ( { query , children , not } ) => { const matchQuery = useMatchMedia ( QUERY [ query ] || query ) ; const isMatching = not ? ! matchQuery : matchQuery ; return < React . Fragment > { isMatching ? children : null } < /React.Fragment>; } ; export type NamedMatchMediaProps = Omit < MatchMediaProps , 'query' > ; export const IsDesktop = ( props ) => < MatchMedia query = { QueryKeys . DESKTOP } { ... props } />; export const IsDesktopXL = ( props ) => < MatchMedia query = { QueryKeys . DESKTOP_XL } { ... props } />; export const IsMobile = ( props ) => < MatchMedia query = { QueryKeys . MOBILE } { ... props } />; export const IsMobileDown = ( props ) => < MatchMedia query = { QueryKeys . MOBILE_DOWN } { ... props } />; export const IsMobileUp = ( props ) => < MatchMedia query = { QueryKeys . MOBILE_UP } { ... props } />; export const IsTablet = ( props ) => < MatchMedia query = { QueryKeys . TABLET } { ... props } />; export const IsTabletDown = ( props ) => < MatchMedia query = { QueryKeys . TABLET_DOWN } { ... props } />; export const IsTabletUp = ( props ) => < MatchMedia query = { QueryKeys . TABLET_UP } { ... props } />;