https://github.com/mbasso/react-browser-detection
React component to detect browser
https://github.com/mbasso/react-browser-detection
Last synced: 8 months ago
JSON representation
React component to detect browser
- Host: GitHub
- URL: https://github.com/mbasso/react-browser-detection
- Owner: mbasso
- License: mit
- Created: 2016-03-02T18:48:13.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T07:41:07.000Z (over 3 years ago)
- Last Synced: 2025-09-26T15:37:28.735Z (9 months ago)
- Language: JavaScript
- Size: 208 KB
- Stars: 58
- Watchers: 2
- Forks: 14
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React-browser-detection
[](https://www.npmjs.com/package/react-browser-detection)
[](https://github.com/mbasso/react-browser-detection/blob/master/LICENSE.md)
> React component to detect browser
Useful component to detect browser and act accordingly.
## Installation
Using [npm](https://www.npmjs.com/package/react-browser-detection):
```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: () =>
Chrome is fantastic!,
googlebot: () => Hi GoogleBot!,
default: (browser) => Hi {browser}!,
};
export default class App extends Component {
render() {
return (
{ browserHandler }
);
}
}
```
## Documentation
### Props
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 |
### Determining the OS
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.
You can also use `android` 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.
## Author
**Matteo Basso**
- [github/mbasso](https://github.com/mbasso)
- [@Teo_Basso](https://twitter.com/Teo_Basso)
## Copyright and License
Copyright (c) 2016, Matteo Basso.
react-browser-detection source code is licensed under the [MIT License](https://github.com/mbasso/react-browser-detection/blob/master/LICENSE.md).