How to determine mobile or desktop in React

Last updated on January 11, 2022 Augustus Loading... 2 comments

An easy solution to determine whether your React app is rendering on a mobile device or a computer is to use a library called react-device-detect.

A Complete Example

Installation:

npm install react-device-detect --save

The code:

import React, { useState } from "react";
import "./App.css";
import { isMobile, browserName } from "react-device-detect";

function App() {
  return (
    <div style={styles.container}>
      {isMobile ? <h2>Mobile</h2> : <h2>Desktop</h2>}
    </div>
  );
}

// just a little styling
const styles = {
  container: {
    display: 'flex',
    justifyContent: 'center',
    paddingTop: '15px'
  }
}

export default App;

Check it out with the Chrome developer tool:

If you want to trigger an update on window resize instead of manually refreshing the browser as shown in the video above then see this article: /React + TypeScript: Re-render a Component on Window Resize.

Conclusion

You’ve learned a simple and quick technique to detect mobile or desktop in React. If you’d like to explore more new and exciting stuff about modern front-end development, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
krati agrawal
krati agrawal
1 year ago

I have a query, initially, it does not detect whether it is mobile or desktop, only after the refresh it detects. how can we resolve this?

A Goodman
Admin
A Goodman
1 year ago
Reply to  krati agrawal
Last edited 6 months ago by A Goodman

Related Articles