Skip to content

Latest commit

 

History

History
51 lines (36 loc) · 1.46 KB

README.md

File metadata and controls

51 lines (36 loc) · 1.46 KB
Raw

typed-responsive-react

This is typed version of responsive-react npm package.

Demo

Install

npm i -D typed-responsive-react

How to use

Following can be imported from this package

import {
    Responsive,
    getWindowDimension,
    getDeviceTypeInfo,
    isMobileDevice,
    isTabletDevice,
    isLaptopDevice,
    isBiggerThanLaptop,
    IDeviceInfo,
    IWindowDimension
} from 'typed-responsive-react';

Responsive

<>
    <Responsive displayIn={["laptop"]}>
        Content to be displayed in LAPTOP
    </Responsive>
    <Responsive displayIn={["mobile", "tablet"]}>
        Content to be displayed in LAPTOP
    </Responsive>
</>

getDeviceTypeInfo() function returns of type IDeviceInfo contains following information:

  • width = Width of viewport
  • height = Height of viewport
  • deviceTypeVariant = [MobileSmall, MobileMedium, MobileLarge, Tablet, iPadPro, LaptopSmall, LaptopLarge, LargerThanLaptop, LargeScreenMax]
  • deviceType = [Laptop, Tablet, Mobile, LargerThanLaptop]
  • orientation = [Landscape, Portrait]
  • isFallback = [true, false] default false. true if it detects some awkward dimension (true is very rare)

isMobileDevice, isTabletDevice, isLaptopDevice and isBiggerThanLaptop

These function returns boolean value for each deviceType.