React-browser-detection
React component to detect browser
Useful component to detect browser and act accordingly.
Installation
Using npm:
npm install --save react-browser-detection
Supposing a CommonJS environment, you can simply use the component in this way:
import React, { Component } from 'react';
import BrowserDetection from 'react-browser-detection';
const browserHandler = {
chrome: () => <div>Chrome is fantastic!</div>,
default: (browser) => <div>Hi {browser}!</div>,
};
export default class App extends Component {
render() {
return (
<BrowserDetection>
{ browserHandler }
</BrowserDetection>
);
}
}
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 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 |
Author
Matteo Basso
Copyright and License
Copyright (c) 2016, Matteo Basso.
react-browser-detection source code is licensed under the MIT License.