micas06gua / device-detector

Consistent device detection across SSR and CSR

Device Detector

Use this app's HOC or hook to find out current device's viewport size.

Usage

useDevice

Returns an object with the format of DeviceInfo defined as:

interface DeviceInfo {
  device: Device
  isMobile: boolean
}

enum Device {
  phone = 'phone',
  tablet = 'tablet',
  desktop = 'desktop',
}

import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
  const { isMobile } = useDevice()
  if (isMobile) { 
    // is phone or tablet!
  }
  return ...
}

or

import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
  const { device } = useDevice()
  if (device === 'tablet') { 
    //is tablet!
  }
  return ...
}

withDevice

It is a HOC, it injects two props (isMobile and device) into your component's props:

type WithDeviceProps = Props & {
  isMobile: boolean
  device: Device
}
enum Device {
  phone = 'phone',
  tablet = 'tablet',
  desktop = 'desktop',
}

import { withDevice } from 'vtex.device-detector'
const MyComponent = props => {
  if (props.isMobile) { 
    // is phone or tablet!
  }
  return ...
}

export default withDevice(MyComponent)

or

import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
  if (props.device === 'tablet') { 
    //is tablet!
  }
  return ...
}

export default withDevice(MyComponent)