responsive-react

Device-type based rendering of react components (typescript), like render <SideNav> when desktop and <BottomNav> when mobile or tablet

• Conditional rendering

• No CSS

Conditional rendering Can take either one DeviceType input (DEMO)

import { IdResponsiveRenderOnlyIn, Responsive } from "responsive-react";

...

<Responsive displayIn={IdResponsiveRenderOnlyIn.Laptop}>

{'This is Desktop/Laptop'}

</Responsive>

Or, Multiple DeviceType in Array

import { IdResponsiveRenderOnlyIn, Responsive } from "responsive-react";

...

<Responsive displayIn={[IdResponsiveRenderOnlyIn.Mobile, IdResponsiveRenderOnlyIn.Tablet]}>

{'This is either Mobile or Tablet'}>

</Responsive>

Device information Use getDeviceTypeInfo() Returns IDeviceTypeInfo (object) with following info

{

deviceType: IdDeviceType ('Mobile' | 'Tablet' | 'Laptop' | 'LargerThanLaptop'),

deviceTypeVariant: IdDeviceTypeBreakdown (Long list),

orientation?: IdDeviceOrientation ('Portrait' | 'Landscape'),

width: number,

height: number

}

Other helper functions

import {

IDeviceTypeInfo, 

IWindowDimensionMetrics

} from "responsive-react/dist/types"; // Type imports

import {

getDeviceTypeInfo, 

getWindowDimension, 

isMobileDevice

} from "responsive-react/dist/utilResponsive";

+----------------------+-------------------------+

| Function             | returnType              |

+----------------------+-------------------------+

| getDeviceTypeInfo()  | IDeviceTypeInfo         |

+----------------------+-------------------------+

| getWindowDimension() | IWindowDimensionMetrics |

+----------------------+-------------------------+

| isMobileDevice()     | boolean                 |

+----------------------+-------------------------+

| isTabletDevice()     | boolean                 |

+----------------------+-------------------------+

| isLaptopDevice()     | boolean                 |

+----------------------+-------------------------+

| isBiggerThanLaptop() | boolean                 |  

+----------------------+-------------------------+

Report issue HERE