Sometimes, we want to determine if the application is being viewed on mobile or desktop browser with React.
In this article, we’ll look at how to determine if the application is being viewed on mobile or desktop browser with React.
How to determine if the application is being viewed on mobile or desktop browser with React?
To determine if the application is being viewed on mobile or desktop browser with React, we use the react-device-detect package.
To install it, we run
npm install react-device-detect --save
Then we use it by writing
import { isMobile } from "react-device-detect";
const MyComponent = () => {
if (isMobile) {
return <div> This content is available only on mobile</div>;
}
return <div> content... </div>;
};
to check is isMobile is true in MyComponent .
If it’s true, then the component is loaded on a mobile device.
Conclusion
To determine if the application is being viewed on mobile or desktop browser with React, we use the react-device-detect package.
