Use this app's HOC or hook to find out current device's viewport size.
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 ...
}
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)