Device Type Detector for React and Next.js

Project Links:

Installation

npm i next-device-detection

Usage

It works by checking width of window. (Mobile, Tablet and Desktop)

import useDeviceDetector from "next-device-detection";

function MyComponent() {
  const device = useDeviceDetector();

  return (
    <div>
      {device.isMobile && <p>Mobile device detected!</p>}
      {device.isTablet && <p>Tablet device detected!</p>}
      {device.isDesktop && <p>Desktop device detected!</p>}
    </div>
  );
}

export default MyComponent;

Detect if detection is complete

if (!device.detected) {
  // Show loading or return null
}

Changelog

v1.1.0:

• useLayoutEffect hook instead of useEffect.
• New property to track if detection is complete.

v1.0.1:

• Proper Docs Added

Contributing

Help to improve this project by a PR. Feel free to open issue or submit an PR.