dibs-media-query

1.0.2 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i dibs-media-query

Weekly Downloads

2

Version

1.0.2

License

none

Last publish

Collaborators

  • robrichard