dibs-media-query

Media query component and screen size utils

Usage

<MediaQuery/> Component

 
import {MediaQuery, queries} from 'dibs-media-query';
 
function ResponsiveComponent () => {
    return (
        <div>
            <MediaQuery query={[queries.lg, queries.xl]} exclude>
                <MyMobileComponent />
            </MediaQuery>
            <MediaQuery query={[queries.lg, queries.xl]}>
                <MyDesktopComponent />
            </MediaQuery>
        </div>
    );
} 

screenSize utils

import {isMobile} from 'dibs-media-query';
 
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.