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

import { MobileDevice } from 'react-detect';

const MyComponent = () => {
    return (<MobileDevice>
        <YourComponent />
    </MobileDevice>);
}

Tablet Devices

import { TabletDevice } from 'react-detect';

const MyComponent = () => {
    return (<TabletDevice>
        <YourComponent />
    </TabletDevice>);
}

Desktop Devices

import { DesktopDevice } from 'react-detect';

const MyComponent = () => {
    return (<DesktopDevice>
        <YourComponent />
    </DesktopDevice>);
}

Desktop And Tablet Devices

import { DesktopAndTabletDevice, DesktopAndTabletLargeDevice } from 'react-detect';

const MyComponent = () => {
    return (<>
        <DesktopAndTabletDevice>
            <YourComponent />
        </DesktopAndTabletDevice>
        {/* Useful for large monitors (ultrawides) or TVs */}
        <DesktopAndTabletLargeDevice>
            <YourComponent />
        </DesktopAndTabletLargeDevice>
    </>);
}

Methods

Mobile Methods

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

Tablet Methods

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

Desktop Methods

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

Device Type

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

Server Side Rendering (SSR)

import { SSRProvider } from 'react-detect';

function App() {

    return (
        <BrowserRouter>
            <SSRProvider>
                <MoreComponents />
            </SSRProvider>
        </BrowserRouter>
    );
}

Server/Client Methods

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
}