next-device-detection

1.1.0 • Public • Published

Device Type Detector for React and Next.js

NodeJS React Next JS

Project Links:

NPM GitHub

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.

Package Sidebar

Install

npm i next-device-detection

Weekly Downloads

105

Version

1.1.0

License

GNU GPLv3

Unpacked Size

39.2 kB

Total Files

4

Last publish

Collaborators

  • nis_hantshah