How to determine mobile or desktop in React

July 6, 2020 React Man Loading... Post a comment

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.

Example

Installation:

npm install react-device-detect --save

The code:

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

function App() {
  return (
    <div className="App">
      {isMobile ? <h2>Mobile</h2> : <h2>Desktop</h2>}
    </div>
  );
}

export default App;

Check it out with Chrome developer tool:

Happy coding 🙂

guest
0 Comments
Inline Feedbacks
View all comments

Related Articles

0
Would love your thoughts, please comment.x
()
x