# dibs-media-query
Media query component and screen size utils

## Usage
__`<MediaQuery/>` Component__
```js

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__

```js
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.