dibs-media-query
Media query component and screen size utils
Usage
<MediaQuery/>
Component
; => { return <div> <MediaQuery query=querieslg queriesxl exclude> <MyMobileComponent /> </MediaQuery> <MediaQuery query=querieslg queriesxl> <MyDesktopComponent /> </MediaQuery> </div> ;}
screenSize utils
; if isMobile // do mobile only thing
API
queries
Useful breakpoints: xs
, sm
, md
, lg
, xl
. Used as props for <MediaQuery/>
<MediaQuery/>
Component
React component that only renders at specified break points
Screen Size utils
isMobile
: Check if this is a mobile device.isTablet
: Check if the the device is a tablet.isMobileOrTablet
: Check if the the device is mobile or a tablet.isDesktop
: Check if this is a desktop device.isTabletOrDesktop
: Check if the the device is a tablet or desktop.