Wondering what’s next for npm?Check out our public roadmap! »

    responsive-react
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    React-TypeScript-Responsive-Component

    NPM

    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

    Install

    npm i responsive-react

    DownloadsWeekly Downloads

    141

    Version

    5.0.0

    License

    ISC

    Unpacked Size

    137 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar