use-device-media v1.0.4

use-device-media

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

Install

npm 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)

import React, { Fragment } from 'react'
import classNames from 'classnames'
import { useDeviceMedia } from 'use-device-media'

const App = () => {
  // Provide media queries for phone, tablets and desktops/TV's ...
  const options = {
    iPhoneX: '(max-width: 375px)',
    galaxyS6: '(max-width: 360px)',
    pixel2: '(max-width: 420px)',
    iPad: '(min-width: 480px) and (max-width: 768px)',
    iPadPro: '(min-width: 992px) and (max-width: 1024px)',
    desktop: '(min-width: 1200px)',

    ... // add any queries
  }

  const [deviceMedia] = useDeviceMedia(options)
  const { iPhoneX, galaxyS6, pixel2, iPad } = deviceMedia

  return (
    <Fragment>
      <div className="">
          <div className={classNames({
                'myClassName': iPhoneX || pixel2, // use conditionals
                'justifyToEnd': desktop, 
            })}>
          </div>
      </div>
    </Fragment>
  )
}

Some other usages

  <MyComponent iPhoneX={iPhone} />


  const MyComponent = ({iPhoneX, ...}) => {
    ...
    return (
      <div>
        {isPhone ? (
          <div>Do iPhone stuffs</div>
        ): (
          <div>Do other stuffs</div>
        )}
      </div>
    )
  }

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