react

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

detect browser react

457

REACT

import React from 'react';

class App extends React.Component {
constructor() {
super();

this.state = {
data: []
}

this.setStateHandler = this.setStateHandler.bind(this);
};

setStateHandler() {

var msg;
if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ))
{
msg = "IE";
this.setState({data: msg})
}
else if(navigator.appVersion.indexOf('Edge') > -1)
{
msg = "Edge";
this.setState({data: msg})
}
else if(navigator.userAgent.toLowerCase().indexOf("op") > -1)
{
msg = "Opera";
this.setState({data: msg});
}
else if(navigator.userAgent.indexOf("Chrome") != -1)
{
msg = "Chrome";
this.setState({data: msg})
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
msg = "Firefox";
this.setState({data: msg})
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
msg = "Safari";
this.setState({data: msg})
}
else
{
msg = "Unknown";
this.setState({data: msg})
}

};

render() {
return (
<div>
<button onClick = {this.setStateHandler}>Click</button>
<h2>{this.state.data}</h2>
</div>
);
}
}

export default App;

By 6 years ago

The power of the user (%)

15%

Show ResultREACT

<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.3.min.js "></script>
<script src="https://fb.me/react-dom-0.14.3.min.js "></script>
</head>
<body>

<script type="text/javascript">

if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ))
{
device = "IE";
}
else if(navigator.appVersion.indexOf('Edge') > -1)
{
device = "Edge";
}
else if(navigator.userAgent.toLowerCase().indexOf("op") > -1)
{
device = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1)
{
device = "Chrome";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
device = "Firefox";
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
device = "Safari";
}
else
{
device = "unknow";
}

</script>

<script type="text/javascript">

var div = React.DOM.div

var HelloWorldComponent = (
div(null,'' + device + '')
)

ReactDOM.render(HelloWorldComponent, document.getElementsByTagName('body')[0]);

</script>

</body>
</html>

By 7 years ago

The power of the user (%)

14%

Show ResultREACT

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="my-div"></div>

<script src="https://fb.me/react-0.14.3.min.js "></script>
<script src="https://fb.me/react-dom-0.14.3.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">

var MyReact = React.createClass({
render: function() {
return (
<p>{this.props.a}</p>
);
}
});

var a;
var b;
if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ))
{
b = "IE";
}
else if(navigator.appVersion.indexOf('Edge') > -1)
{
b = "Edge";
}
else if(navigator.userAgent.toLowerCase().indexOf("op") > -1)
{
b = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1)
{
b = "Chrome";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
b = "Firefox";
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
b = "Safari";
}
else
{
b = "unknow";
}

ReactDOM.render(
<MyReact a={b}/>,
document.getElementById('my-div')
);

</script>

</body>
</html>

By 7 years ago

The power of the user (%)

REACT

// at first you install npm install --save react-browser-detection

import React, { Component } from 'react';
import BrowserDetection from 'react-browser-detection';

const browserHandler = {
default: (browser) => <div>{browser}</div>
};

export default class App extends Component {
render() {
return (
<BrowserDetection>
{ browserHandler }
</BrowserDetection>
);
}
}