use-device-media

This is a hook used to Detect the current device being used to render a page.

Install

1npm install --save use-device-media

Usage

Detection of any device based on User custom queries :

1) Smart Phones or small devices
2) Tablets / Medium Devices 
3) Larger Screens / Desktops
Supported (Portrait & Landscape mode)

1import React, { Fragment } from 'react'
2import classNames from 'classnames'
3import { useDeviceMedia } from 'use-device-media'
4
5const App = () => {
6  // Provide media queries for phone, tablets and desktops/TV's ...
7  const options = {
8    iPhoneX: '(max-width: 375px)',
9    galaxyS6: '(max-width: 360px)',
10    pixel2: '(max-width: 420px)',
11    iPad: '(min-width: 480px) and (max-width: 768px)',
12    iPadPro: '(min-width: 992px) and (max-width: 1024px)',
13    desktop: '(min-width: 1200px)',
14
15    ... // add any queries
16  }
17
18  const [deviceMedia] = useDeviceMedia(options)
19  const { iPhoneX, galaxyS6, pixel2, iPad } = deviceMedia
20
21  return (
22    <Fragment>
23      <div className="">
24          <div className={classNames({
25                'myClassName': iPhoneX || pixel2, // use conditionals
26                'justifyToEnd': desktop, 
27            })}>
28          </div>
29      </div>
30    </Fragment>
31  )
32}

Some other usages

1  <MyComponent iPhoneX={iPhone} />
2
3
4  const MyComponent = ({iPhoneX, ...}) => {
5    ...
6    return (
7      <div>
8        {isPhone ? (
9          <div>Do iPhone stuffs</div>
10        ): (
11          <div>Do other stuffs</div>
12        )}
13      </div>
14    )
15  }

Some other usable media queries

> '(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)'
> '(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'

License

MIT © Montai

---