npm
npm i --save react-useragentor yarn
yarn add react-useragentimport{UserAgent}from"react-useragent";const{ UserAgent }=require("react-useragent");<head><!-- make sure and also include react and react-dom --><scriptsrc="https://unpkg.com/mobile-detect@1.4.1/mobile-detect.js" /><scriptsrc="https://unpkg.com/react-useragent@1.1.1/lib/index.js" /></head>varUserAgent=ReactUserAgent.UserAgent;importReact,{Component}from'react';import{UserAgent}from'react-useragent';classAppextendsComponent{render(){<div><UserAgent>{({ ua })=>{returnua.mobile ? <inputtype="date"/> : <inputtype="text"/>>;}}</UserAgent></div>}}exportdefaultApp;importReact,{Component}from'react';import{UserAgent}from'react-useragent';classAppextendsComponent{render(){<div><UserAgentrender={({ ua })=>{returnua.mobile ? <inputtype="date"/> : <inputtype="text"/>>;}}/></div>}}exportdefaultApp;importReact,{Component}from"react";import{withUserAgent}from"react-useragent";classAppextendsComponent{render(){<div>{this.props.ua.mobile ? <inputtype="date"/> : <inputtype="text"/>}</div>;}}exportdefaultwithUserAgent(App);This utility uses mobile-detect for user agent parsing. The following object is exposed to the component through props/args (depending on the usage). The key "md" is the actual mobile-detect constructor and is available to call any mobile-detect methods that are not included by default.
{
"mobile": null,
"phone": null,
"tablet": null,
"os": null,
"md": {
"ua":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36",
"_cache": {
"phone": null,
"tablet": null,
"mobile": null,
"os": null
},
"maxPhoneWidth": 600
}
}