Device detection for react
npm install react-detectReact detect is a library to make it easy to encapsulate components for display within different device browser window sizes.
> npm install react-detect
or
> yarn add react-detect
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
}
``