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:
_10interface DeviceInfo {_10 device: Device_10 isMobile: boolean_10}_10_10enum Device {_10 phone = 'phone',_10 tablet = 'tablet',_10 desktop = 'desktop',_10}
_10import { useDevice } from 'vtex.device-detector'_10const MyComponent = props => {_10 const { isMobile } = useDevice()_10 if (isMobile) { _10 // is phone or tablet!_10 }_10 return ..._10}
or
_10import { useDevice } from 'vtex.device-detector'_10const MyComponent = props => {_10 const { device } = useDevice()_10 if (device === 'tablet') { _10 //is tablet!_10 }_10 return ..._10}
withDevice
It is a HOC, it injects two props (isMobile and device) into your component's props:
_10type WithDeviceProps = Props & {_10 isMobile: boolean_10 device: Device_10}_10enum Device {_10 phone = 'phone',_10 tablet = 'tablet',_10 desktop = 'desktop',_10}
_10import { withDevice } from 'vtex.device-detector'_10const MyComponent = props => {_10 if (props.isMobile) { _10 // is phone or tablet!_10 }_10 return ..._10}_10_10export default withDevice(MyComponent)
or
_10import { useDevice } from 'vtex.device-detector'_10const MyComponent = props => {_10 if (props.device === 'tablet') { _10 //is tablet!_10 }_10 return ..._10}_10_10export default withDevice(MyComponent)