React component to detect browser
npm install react-browser-detection
> React component to detect browser
Useful component to detect browser and act accordingly.
Using npm:
``bash`
npm install --save react-browser-detection
Supposing a CommonJS environment, you can simply use the component in this way:
`javascript
import React, { Component } from 'react';
import BrowserDetection from 'react-browser-detection';
const browserHandler = {
chrome: () =>
export default class App extends Component {
render() {
return (
{ browserHandler }
);
}
}
`
Here is the list of props used by the component.
|Property |Type |Default |Description |
|-----------|-------|----------|--------------|
|once |Bool |true |If `true`, function contained in children prop will be call only once. If `false`, it will be called on each render. Default `true` due to performance reasons |`
|children |Object { browserName: function(browserName){ return node; } } | |An object containing functions to handle different browsers. Properties would be called like browsers: chrome`, `firefox`, `ie`, `edge`, `safari`, `opera`, `blink`, `googlebot` and `default`. If specified, the component will use the function under the property with the name of the browser, otherwise, it will use `default`. Each function take the browser name as parameter and must return a node |
At this time, only desktop and Android variations are being detected. Others may be added as the need arises.
To determine if the browser is running on Android, prefix its name with android- in the object you pass as children.android
You can also use alone to fallback to a general case.
Example
`javascript
const browserHandler = {
chrome: () => Chrome is fantastic!,
googlebot: () => Hi GoogleBot!,
android: () => Whatever browser you have, it must be on Android!
'android-chrome': () => Chrome is a good choice for Android!
default: (browser) => Hi {browser}!,
};
`
Handler determination goes from most to least specific. It will first look for an android-browserName match and then android (assuming the OS is Android) then failing that it will look for browserName and finally will fallback to using default`. This allows you to custom tailor responses for each scenario, or to provide general cases.
react-browser-detection source code is licensed under the MIT License.