Sometimes we often create components different for Mobile, Tablets or Desktop and want them to get called respectively as per the device detection. Well the purpose of creating this library is to ease the debugging on development environment like when we debug our React application on Chrome browser with 'Toggle device toolbar' and change the device resolution, the respective components should get called.

If you don't find overhead of debugging such scenarios in their respective device resolutions like Tablets, Mobile or Desktop I highly recommend to use library react-device-detect instead of this one.

Examples

Import library

import DeviceIdentifier from 'react-device-identifier';

Run component only on Desktop

<DeviceIdentifier isDesktop={true}>
    // Desktop Component goes here
</DeviceIdentifier>

Run component only on Mobile

<DeviceIdentifier isMobile={true}>
    // Mobile Component goes here
</DeviceIdentifier>

Run component only on Tablet

<DeviceIdentifier isTablet={true}>
    // Tablet Component goes here
</DeviceIdentifier>

Run component for Mobile & Tablet

<DeviceIdentifier isMobile={true} isTablet={true}>
    // Tablet & Mobile Component goes here
</DeviceIdentifier>

We can make this more granular and can introduce more options like detecting low resolution tablets, But for now I kept it simple and covers the basic scenarios.

Feel free to send out pull request or can contact me directly via my eamil id [email protected]

Keywords

FAQs

What is react-device-identifier?

Load different components for Mobile and Desktop

Is react-device-identifier popular?

The npm package react-device-identifier receives a total of 123 weekly downloads. As such, react-device-identifier popularity was classified as not popular.

Is react-device-identifier well maintained?

We found that react-device-identifier demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 20 Jul 2019