Skip to content

Commit 54ce6cf

Browse files
duskloadMichael Laktionov
duskload
and
Michael Laktionov
authored
Rewrite (#161)
* Refactor app structure * Access all selectors by user agent. * Add hooks * update * fix vulnerabilities * Tests update * make build folder, update exports, update types. * Accept all common html props * Updated docs * Updated docs * Updated docs * Bump version * Add types. Add Embedded type * Update docs Co-authored-by: Michael Laktionov <[email protected]>
1 parent 5d2907f commit 54ce6cf

35 files changed

+3938
-7804
lines changed

‎.gitignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1+
# folders
12
node_modules
23
coverage
4+
5+
# ide
36
.idea
7+
.vscode
8+
9+
# mac files
410
.DS_Store
11+
12+
# build
13+
dist

‎.npmignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
specs
22
src
3-
.jestSetup.js
3+
.jestSetup.js
4+
docs

‎.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
"tabWidth": 2,
33
"singleQuote": true,
44
"endOfLine": "auto",
5-
"printWidth": 120
5+
"printWidth": 100
66
}

‎README.md‎

Lines changed: 33 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,26 @@ or
1616
yarn add react-device-detect
1717
```
1818

19+
## API
20+
21+
- [Hooks, SSR and utilities](docs/api.md)
22+
- [Selectors](docs/selectors.md)
23+
- [Views](docs/views.md)
24+
1925
## Usage
2026

2127
Example:
2228

2329
```javascript
24-
import {
25-
BrowserView,
26-
MobileView,
27-
isBrowser,
28-
isMobile
29-
} from "react-device-detect";
30+
import { BrowserView, MobileView, isBrowser, isMobile } from 'react-device-detect';
3031
```
3132

3233
```html
3334
<BrowserView>
34-
<h1> This is rendered only in browser </h1>
35+
<h1>This is rendered only in browser</h1>
3536
</BrowserView>
3637
<MobileView>
37-
<h1> This is rendered only on mobile </h1>
38+
<h1>This is rendered only on mobile</h1>
3839
</MobileView>
3940
```
4041

@@ -43,28 +44,32 @@ if you don't need a view, you can use `isMobile` for conditional rendering
4344
```javascript
4445
import {isMobile} from 'react-device-detect';
4546

46-
renderContent = () => {
47+
function App() {
48+
renderContent = () => {
4749
if (isMobile) {
48-
return <div> This content is unavailable on mobile</div>
50+
return <div> This content is unavailable on mobile</div>
4951
}
5052
return <div> ...content </div>
51-
}
53+
}
5254

53-
render() {
55+
render() {
5456
return this.renderContent();
57+
}
5558
}
5659
```
5760

5861
If you want to leave a message to a specific browser (e.g IE), you can use `isIE` selector
5962

6063
```javascript
61-
import {isIE} from 'react-device-detect';
64+
import { isIE } from 'react-device-detect';
6265

63-
render() {
66+
function App() {
67+
render() {
6468
if (isIE) return <div> IE is not supported. Download Chrome/Opera/Firefox </div>
6569
return (
66-
<div>...content</div>
70+
<div>...content</div>
6771
)
72+
}
6873
}
6974
```
7075

@@ -73,12 +78,14 @@ If you want to render a view on a specific device and with a specific condition:
7378
```javascript
7479
import { browserName, CustomView } from 'react-device-detect';
7580

76-
render() {
81+
function App() {
82+
render() {
7783
return (
78-
<CustomView condition={browserName === "Chrome"}>
79-
<div>...content</div>
80-
</CustomView>
84+
<CustomView condition={browserName === "Chrome"}>
85+
<div>...content</div>
86+
</CustomView>
8187
)
88+
}
8289
}
8390
```
8491

@@ -87,133 +94,35 @@ render() {
8794
You can style view component by passing class to `viewClassName` prop
8895

8996
```html
90-
<BrowserView viewClassName='custom-class'>
91-
<p> View content </p>
97+
<BrowserView className="custom-class">
98+
<p>View content</p>
9299
</BrowserView>
93100
```
94101

95102
or you can pass inline styles to `style` prop
96103

97104
```javascript
98105
const styles = {
99-
background: "red",
100-
fontSize: "24px",
101-
lineHeight: "2"
106+
background: 'red',
107+
fontSize: '24px',
108+
lineHeight: '2',
102109
};
103110
```
104111

105112
```html
106113
<BrowserView style={styles}>
107-
<p> View content</p>
114+
<p>View content</p>
108115
</BrowserView>
109116
```
110117

111-
## Selectors and views
112-
113-
### Selectors
114-
115-
| prop | type | description |
116-
| ------------------ | -------- | -------------------------------------------------------------------------------------- |
117-
| isMobile | bool | returns true if device type is `mobile` or `tablet` |
118-
| isMobileOnly | bool | returns true if device type is `mobile` |
119-
| isTablet | bool | returns true if device type is `tablet` |
120-
| isBrowser (legacy) | bool | returns true if device type is `browser` (better to use `isDesktop` instead) |
121-
| isDesktop | bool | returns true if device type is `browser` (an alias of the isBrowser type |
122-
| isSmartTV | bool | returns true if device type is `smarttv` |
123-
| isWearable | bool | returns true if device type is `wearable` |
124-
| isConsole | bool | returns true if device type is `console` |
125-
| isAndroid | bool | returns true if os type is `Android` |
126-
| isWinPhone | bool | returns true if os type is `Windows Phone` |
127-
| isIOS | bool | returns true if os type is `iOS` |
128-
| isChrome | bool | returns true if browser is `Chrome` |
129-
| isFirefox | bool | returns true if browser is `Firefox` |
130-
| isSafari | bool | returns true if browser is `Safari` |
131-
| isOpera | bool | returns true if browser is `Opera` |
132-
| isIE | bool | returns true if browser is `Internet Explorer` |
133-
| isEdge | bool | returns true if browser is `Edge` or `Edge Chromium` |
134-
| isYandex | bool | returns true if browser is `Yandex` |
135-
| isChromium | bool | returns true if browser is `Chromium` |
136-
| isMobileSafari | bool | returns true if browser is `Mobile Safari` |
137-
| isSamsungBrowser | bool | returns true if browser is `Samsung Browser` |
138-
| osVersion | string | returns os version (e.g 7 for `Windows` or 6 for `Android`) |
139-
| osName | string | returns os name (e.g `Windows`, `Android`) |
140-
| fullBrowserVersion | string | returns full browser version (e.g 65.0.3325.181 for `Chrome`) |
141-
| browserVersion | string | returns browser `major` version (e.g 65 in `Chrome` or 9 in `IE`) |
142-
| browserName | string | returns browser name |
143-
| mobileVendor | string | returns mobile device vendor (e.g `LG`, `iPhone` etc) |
144-
| mobileModel | string | returns mobile device model (e.g `Nexus 5`) |
145-
| engineName | string | returns browser engine `name` (e.g `Gecko` for FF or `WebKit` for Chrome) |
146-
| engineVersion | string | returns engine version |
147-
| getUA | string | returns user agent |
148-
| deviceType | string | returns device type (e.g `mobile` or `tablet`) |
149-
| isIOS13 | boolean | returns true/false if device is running on iOS13 |
150-
| isIPhone13 | boolean | returns true/false if device is iPhone and running on iOS13 |
151-
| isIPad13 | boolean | returns true/false if device is iPad and running on iOS13 |
152-
| isIPod13 | boolean | returns true/false if device is iPod and running on iOS13 |
153-
| isElectron | boolean | returns true/false if running on `Electron` |
154-
| isEdgeChromium | boolean | returns true/false if browser is `Edge Chromium` |
155-
| isLegacyEdge | boolean | returns true if browser is `Edge` |
156-
| isWindows | boolean | returns true/false if os is `Windows` |
157-
| isMacOs | boolean | returns true/false if os is `Mac OS` |
158-
| deviceDetect | object | return data object which includes all data about device (e.g version, engine, os etc.) |
159-
| OsTypes | object | return data object with os types |
160-
| BrowserTypes | object | return data object with browser types |
161-
### Views
162-
163-
Available views:
164-
165-
- MobileView
166-
- BrowserView
167-
- TabletView
168-
- AndroidView
169-
- IOSView
170-
- IEView
171-
- WinPhoneView
172-
- MobileOnlyView
173-
- SmartTVView
174-
- ConsoleView
175-
- WearableView
176-
- CustomView -- has `condition` prop which takes any expression which results into boolean (e.g browserName === 'Chrome')
177-
178-
Each view accepts three props:
179-
180-
1. `viewClassName` - to style the view
181-
2. `style` - to add inline styles to view
182-
3. `children` - to pass children to view
183-
4. `renderWithFragment` - render with `React.Fragment` instead of `<div>`
184-
185-
### withOrientationChange
186-
A HOC for getting `isLandscape` and `isPortrait` props for mobile
187-
188-
```js
189-
import { withOrientationChange } from 'react-device-detect'
190-
191-
let App = props => {
192-
const { isLandscape, isPortrait } = props
193-
194-
if (isLandscape) {
195-
return <div>The device is in Landscape mode</div>
196-
}
197-
198-
if (isPortrait) {
199-
return <div>The device is in Portrait mode</div>
200-
}
201-
}
202-
203-
App = withOrientationChange(App)
204-
205-
export { App }
206-
```
207-
208118
### Testing
209119

210120
```js
211121
import * as rdd from 'react-device-detect';
212122

213-
rdd.isMobile = true;
123+
rdd.isMobile = true;
214124

215125
// use in tests
216-
217126
```
218127

219128
## License

‎docs/api.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
### API
2+
3+
#### Hooks
4+
5+
`useMobileOrientation` - watches orientation change and returns current orientation, and boolean values for portrait and landscape
6+
7+
```js
8+
import { useMobileOrientation } from 'react-device-detect';
9+
10+
function App() {
11+
const { isLandscape } = useMobileOrientation()
12+
13+
if (!isLandscape) {
14+
return null
15+
}
16+
17+
return <div> Landscape design </div>
18+
}
19+
```
20+
21+
`useDeviceData` - returns full data acquired from user agent. You can either pass your user agent or it will get current window ua.
22+
23+
`useDeviceSelectors` - returns selectors and full user agent data. You can either pass your user agent or it will get current window ua.
24+
25+
```js
26+
const [selectors, data] = useDeviceSelectors(window.navigator.userAgent)
27+
28+
const { isMobile } = selectors
29+
...
30+
```
31+
32+
#### HOC
33+
34+
`withOrientationChange` - does the same as `useMobileOrientation` hook.
35+
36+
```js
37+
38+
function App({ isPortrait } ) {
39+
40+
if (isPortrait) {
41+
return null
42+
}
43+
44+
return <div />
45+
}
46+
47+
export default withOrientationChange(App)
48+
```
49+
50+
#### Enums
51+
52+
`BrowserTypes` and `OsTypes` available for import
53+
54+
```js
55+
import { BrowserTypes } from 'react-device-detect'
56+
57+
function App() {
58+
59+
if (BrowserTypes.InternetExplorer) {
60+
return null
61+
}
62+
63+
return <div />
64+
}
65+
```
66+
67+
#### Utils & SSR
68+
69+
All functions accept userAgent string.
70+
71+
`getSelectorsByUserAgent` - returns mobile selectors from userAgent string. Especially useful for SSR
72+
73+
```js
74+
const userAgent = req['userAgent']
75+
76+
const { isMobile } = getSelectorsByUserAgent(userAgent)
77+
...
78+
```
79+
80+
`parseUserAgent` - parses user agent string and gives all available data for it
81+
82+
`deviceDetect` - parses user agent string for current device and gives all available data for it
83+
84+
`setUserAgent` - sets user agent

‎docs/selectors.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
### Selectors
2+
3+
Available selectors:
4+
5+
| prop | type | description |
6+
| ------------------ | ------- | -------------------------------------------------------------------------------------- |
7+
| isMobile | bool | returns true if device type is `mobile` or `tablet` |
8+
| isMobileOnly | bool | returns true if device type is `mobile` |
9+
| isTablet | bool | returns true if device type is `tablet` |
10+
| isBrowser (legacy) | bool | returns true if device type is `browser` (better to use `isDesktop` instead) |
11+
| isDesktop | bool | returns true if device type is `browser` (an alias of the isBrowser type |
12+
| isSmartTV | bool | returns true if device type is `smarttv` |
13+
| isWearable | bool | returns true if device type is `wearable` |
14+
| isConsole | bool | returns true if device type is `console` |
15+
| isEmbedded | bool | returns true if device type is `embedded` |
16+
| isAndroid | bool | returns true if os type is `Android` |
17+
| isWinPhone | bool | returns true if os type is `Windows Phone` |
18+
| isIOS | bool | returns true if os type is `iOS` |
19+
| isChrome | bool | returns true if browser is `Chrome` |
20+
| isFirefox | bool | returns true if browser is `Firefox` |
21+
| isSafari | bool | returns true if browser is `Safari` |
22+
| isOpera | bool | returns true if browser is `Opera` |
23+
| isIE | bool | returns true if browser is `Internet Explorer` |
24+
| isEdge | bool | returns true if browser is `Edge` or `Edge Chromium` |
25+
| isYandex | bool | returns true if browser is `Yandex` |
26+
| isChromium | bool | returns true if browser is `Chromium` |
27+
| isMobileSafari | bool | returns true if browser is `Mobile Safari` |
28+
| isSamsungBrowser | bool | returns true if browser is `Samsung Browser` |
29+
| osVersion | string | returns os version (e.g 7 for `Windows` or 6 for `Android`) |
30+
| osName | string | returns os name (e.g `Windows`, `Android`) |
31+
| fullBrowserVersion | string | returns full browser version (e.g 65.0.3325.181 for `Chrome`) |
32+
| browserVersion | string | returns browser `major` version (e.g 65 in `Chrome` or 9 in `IE`) |
33+
| browserName | string | returns browser name |
34+
| mobileVendor | string | returns mobile device vendor (e.g `LG`, `iPhone` etc) |
35+
| mobileModel | string | returns mobile device model (e.g `Nexus 5`) |
36+
| engineName | string | returns browser engine `name` (e.g `Gecko` for FF or `WebKit` for Chrome) |
37+
| engineVersion | string | returns engine version |
38+
| getUA | string | returns user agent |
39+
| deviceType | string | returns device type (e.g `mobile` or `tablet`) |
40+
| isIOS13 | boolean | returns true/false if device is running on iOS13 |
41+
| isIPhone13 | boolean | returns true/false if device is iPhone and running on iOS13 |
42+
| isIPad13 | boolean | returns true/false if device is iPad and running on iOS13 |
43+
| isIPod13 | boolean | returns true/false if device is iPod and running on iOS13 |
44+
| isElectron | boolean | returns true/false if running on `Electron` |
45+
| isEdgeChromium | boolean | returns true/false if browser is `Edge Chromium` |
46+
| isLegacyEdge | boolean | returns true if browser is `Edge` |
47+
| isWindows | boolean | returns true/false if os is `Windows` |
48+
| isMacOs | boolean | returns true/false if os is `Mac OS` |
49+
| deviceDetect | object | return data object which includes all data about device (e.g version, engine, os etc.) |
50+
| OsTypes | object | return data object with os types |
51+
| BrowserTypes | object | return data object with browser types |

0 commit comments

Comments
 (0)