https://github.com/vtex-apps/device-detector
Consistent device detection across SSR and CSR
https://github.com/vtex-apps/device-detector
hacktoberfest store-framework vtex-io
Last synced: 6 months ago
JSON representation
Consistent device detection across SSR and CSR
- Host: GitHub
- URL: https://github.com/vtex-apps/device-detector
- Owner: vtex-apps
- Created: 2019-07-09T19:01:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T17:34:43.000Z (about 1 year ago)
- Last Synced: 2025-04-09T18:43:00.270Z (about 1 year ago)
- Topics: hacktoberfest, store-framework, vtex-io
- Language: TypeScript
- Homepage:
- Size: 1.5 MB
- Stars: 1
- Watchers: 40
- Forks: 4
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 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:
```js
interface DeviceInfo {
device: Device
isMobile: boolean
}
enum Device {
phone = 'phone',
tablet = 'tablet',
desktop = 'desktop',
}
```
```js
import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
const { isMobile } = useDevice()
if (isMobile) {
// is phone or tablet!
}
return ...
}
```
or
```js
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:
```js
type WithDeviceProps = Props & {
isMobile: boolean
device: Device
}
enum Device {
phone = 'phone',
tablet = 'tablet',
desktop = 'desktop',
}
```
```js
import { withDevice } from 'vtex.device-detector'
const MyComponent = props => {
if (props.isMobile) {
// is phone or tablet!
}
return ...
}
export default withDevice(MyComponent)
```
or
```js
import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
if (props.device === 'tablet') {
//is tablet!
}
return ...
}
export default withDevice(MyComponent)
```