npm i next-device-detection
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;
if (!device.detected) {
// Show loading or return null
}
v1.1.0:
-
useLayoutEffect
hook instead ofuseEffect
. - New property to track if detection is complete.
v1.0.1:
- Proper Docs Added
Help to improve this project by a PR. Feel free to open issue or submit an PR.