From a8d7162cc0794cd0cf141e8b70e24f49097835ab Mon Sep 17 00:00:00 2001 From: Jay Braccini Date: Thu, 23 Apr 2020 15:04:59 -0300 Subject: [PATCH 1/2] Added possible browser values --- README.md | 38 +++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index fdaa94f..46da344 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,8 @@ 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'; +import React, { Component } from "react"; +import BrowserDetection from "react-browser-detection"; const browserHandler = { chrome: () =>
Chrome is fantastic!
, @@ -29,14 +29,9 @@ const browserHandler = { export default class App extends Component { render() { - return ( - - { browserHandler } - - ); + return {browserHandler}; } } - ``` ## Documentation @@ -45,15 +40,14 @@ export default class App extends Component { 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 | - +| 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. +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. @@ -70,15 +64,29 @@ const browserHandler = { ``` -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. +### Possible Browser Detection + +- ie +- edge +- firefox +- opera +- chrome +- safari +- blink +- googlebot +- unknown +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). From 962d77a43f2390b90e3b5dc087a6d5a3a8e56411 Mon Sep 17 00:00:00 2001 From: Jay Braccini Date: Thu, 23 Apr 2020 15:10:17 -0300 Subject: [PATCH 2/2] Removed mistakenly eslinted changes --- README.md | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 46da344..163c31b 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,8 @@ 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"; +import React, { Component } from 'react'; +import BrowserDetection from 'react-browser-detection'; const browserHandler = { chrome: () =>
Chrome is fantastic!
, @@ -29,9 +29,14 @@ const browserHandler = { export default class App extends Component { render() { - return {browserHandler}; + return ( + + { browserHandler } + + ); } } + ``` ## Documentation @@ -40,14 +45,15 @@ export default class App extends Component { 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 | +|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. +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. @@ -76,17 +82,15 @@ const browserHandler = { - googlebot - unknown -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. +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 +## 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).