5.0.0 • Published 4 years ago
responsive-react v5.0.0
#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
5.0.0
4 years ago
3.0.2
5 years ago
3.0.1
5 years ago
3.0.0
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.1.9
5 years ago
1.1.8
5 years ago
1.1.7
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago