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

React Components

Mobile Devices

1import { MobileDevice } from 'react-detect';
2
3const MyComponent = () => {
4    return (<MobileDevice>
5        <YourComponent />
6    </MobileDevice>);
7}

Tablet Devices

1import { TabletDevice } from 'react-detect';
2
3const MyComponent = () => {
4    return (<TabletDevice>
5        <YourComponent />
6    </TabletDevice>);
7}

Desktop Devices

1import { DesktopDevice } from 'react-detect';
2
3const MyComponent = () => {
4    return (<DesktopDevice>
5        <YourComponent />
6    </DesktopDevice>);
7}

Desktop And Tablet Devices

1import { DesktopAndTabletDevice, DesktopAndTabletLargeDevice } from 'react-detect';
2
3const MyComponent = () => {
4    return (<>
5        <DesktopAndTabletDevice>
6            <YourComponent />
7        </DesktopAndTabletDevice>
8        {/* Useful for large monitors (ultrawides) or TVs */}
9        <DesktopAndTabletLargeDevice>
10            <YourComponent />
11        </DesktopAndTabletLargeDevice>
12    </>);
13}

Methods

Mobile Methods

1import { isMobile } from 'react-detect';
2if(isMobile()){
3    // do mobile stuff
4}

Tablet Methods

1import { isTablet } from 'react-detect';
2if(isTablet()){
3    // do tablet stuff
4}

Desktop Methods

1import { isDesktop } from 'react-detect';
2if(isDesktop()){
3    // do desktop stuff
4}

Device Type

1import { getDeviceType } from 'react-detect';
2const deviceType = getDeviceType(); // returns 'D' for desktop, 'T' for tablet, 'M' for mobile

Server Side Rendering (SSR)

1import { SSRProvider } from 'react-detect';
2
3function App() {
4
5    return (
6        <BrowserRouter>
7            <SSRProvider>
8                <MoreComponents />
9            </SSRProvider>
10        </BrowserRouter>
11    );
12}

Server/Client Methods

1import { isServerSide, isClientSide } from 'react-detect';
2if(isServerSide()){
3    // do something fancy for server side pages or SSR pages
4}else{
5    // do something fancy for client side pages
6}
7
8if(isClientSide()){
9    // do something fancy for client side pages
10}else{
11    // do something fancy for server side pages or SSR pages
12}
13