next-device-detection
v1.1.0
Published
Detect device type (Mobile, Tablet, Desktop). Use in react and Next.js
Downloads
361
Maintainers
Readme
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 ofuseEffect
.- 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.