React Detect

React detect is a library to make it easy to encapsulate components for display within different device browser window sizes.

Installing

For the latest stable version:

> npm install react-detect

or

> yarn add react-detect

Usage

$3

#### Mobile Devices
``react
import { MobileDevice } from 'react-detect';

const MyComponent = () => {
return (

);
}
`
#### Tablet Devices
`react
import { TabletDevice } from 'react-detect';

const MyComponent = () => {
return (

);
}
`
#### Desktop Devices
`react
import { DesktopDevice } from 'react-detect';

const MyComponent = () => {
return (

);
}
`
#### Desktop And Tablet Devices
`react
import { DesktopAndTabletDevice, DesktopAndTabletLargeDevice } from 'react-detect';

const MyComponent = () => {
return (<>



{/ Useful for large monitors (ultrawides) or TVs /}



);
}
`

$3


#### Mobile Methods
`react
import { isMobile } from 'react-detect';
if(isMobile()){
// do mobile stuff
}
`
#### Tablet Methods
`react
import { isTablet } from 'react-detect';
if(isTablet()){
// do tablet stuff
}
`
#### Desktop Methods
`react
import { isDesktop } from 'react-detect';
if(isDesktop()){
// do desktop stuff
}
`
#### Device Type
`react
import { getDeviceType } from 'react-detect';
const deviceType = getDeviceType(); // returns 'D' for desktop, 'T' for tablet, 'M' for mobile
`

Server Side Rendering (SSR)

`react
import { SSRProvider } from 'react-detect';

function App() {

return (





);
}
`
#### Server/Client Methods
`react
import { isServerSide, isClientSide } from 'react-detect';
if(isServerSide()){
// do something fancy for server side pages or SSR pages
}else{
// do something fancy for client side pages
}

if(isClientSide()){
// do something fancy for client side pages
}else{
// do something fancy for server side pages or SSR pages
}

``