React-TypeScript-Responsive-Component

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