react-device

React component that provides device information (browser, cpu, device, engine, os, and screen). It refreshes the device screen information on window resize events. Under the hood it uses ua-parser-js to generate the non-screen device information

Installation

npm

$ npm install react-device --save

yarn

$ yarn add react-device

API

<Device onChange [userAgent]/>

React component that takes

• an onChange callback which is called every time the window is resized;
• an optional userAgent string to send to ua-parser-js to gather the device information.

Props

• onChange(deviceInfo) (required) - Callback that gets called every time the window is resized. It's always called once soon after getting mounted. Receives a deviceInfo param which is an Object with keys:

{
    ua: "",
    browser: {
      name: "",
      version: ""
    },
    engine: {
      name: "",
      version: ""
    },
    os: {
      name: "",
      version: ""
    },
    device: {
      model: "",
      type: "",
      vendor: ""
    },
    cpu: {
      architecture: ""
    },
    screen: {
      height: "",
      width: "",
      orientation: ""
    }
}

• userAgent (optional) - User agent string that will override the global.navigator.userAgent string. Useful on server side implementations

Example

import React from 'react'
import Device from 'react-device'

const MyComponent = (props) => {
  const onChange = (deviceInfo) => {
    console.log('Screen height', deviceInfo.screen.height)
    console.log('Screen width', deviceInfo.screen.width)
    console.log('Screen orientation', deviceInfo.screen.orientation)
    console.log('Browser name', deviceInfo.browser.name)
  }

  return <Device onChange={onChange} />
}

export default MyComponent

Device.DEBOUNCE_TIME

Numeric value of how much time should be waited before calling each listener function. Default value is 250.

The debounce function is created lazily when the component instance is mounted, so you can change the value before mounting.

Details

This component lazily adds the window resize event listener, this means it works with universal apps. The listener only get added when a component instance gets mounted.

To avoid performance problems associated with registering multiple event listeners, it only registers a single listener which is shared among all component instances.

License

MIT