I have to clone a website using ReactJs which only works on desktop. When it is viewed in a mobile view or Tablet...it shows "SITE NOT AVAILABLE ON MOBILE". I want to do that too....but it is not working on my site
import "./App.css";
import Navbar from "./components/Navbar";
import Text from "./components/Text";
import Slider from "./components/Slider";
import Wallet from "./components/Wallet";
import Dropdown from "./components/Dropdown";
import MobileTablet from "./components/MobileTablet";
import { BrowserView, MobileView } from "react-device-detect";
import { BrowserRouter as Router } from "react-router-dom";
function App() {
return (
<>
<BrowserView>
<Router>
<Text />
<div className="box">
<Navbar />
<Dropdown />
<div className="box2">
<Slider />
</div>
</div>
<div className="box3">
<Wallet />
</div>
</Router>
</BrowserView>
<MobileView>
<MobileTablet />
</MobileView>
</>
);
}
export default App;
This is the code for App.js the main part....Can someone help me make my app responsive...since i am very new to this. If you need any other codes pls let me know
Look, you can use a State to monitor the viewport of client window, then a useEffect to change it. The property window.innerWidth gives you the width of the client, and then you can specify it to work only under specific conditions:
import { useState, useEffect } from "react";
export default function App() {
const [userIsDesktop, setUserIsDesktop] = useState(true);
useEffect(() => {
window.innerWidth > 1280 ? setUserIsDesktop(true) : setUserIsDesktop(false);
}, [userIsDesktop]);
return (
<div className="App">
{userIsDesktop ? <h1>i'm a desktop</h1> : <h1>i'm a mobile</h1>}
</div>
);
}
you can use isMobile for conditional rendering
import {isMobile} from 'react-device-detect';
...
if (isMobile) {
return <MobileTablet />
}
``