I am trying to build a locked page to display a message when users visit the web app from mobile and load a mobile page layout when a message like this mobile is not supported . I was thinking on using document.addEventListener('DOMContentLoaded', () => { , but not sure . if it's the best , but however where can I load this validation? the logic pseudo will be something to the following
if (tooSmall || isMobile) {
ReactDOM.render(<MobileLockout />);
} else {
ReactDOM.render(<Root/>);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
app.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
You add can a Wrapper (HoC) to your App (in index.js)
ReactDOM.render(
<React.StrictMode>
<MobileWrapper>
<App />
<MobileWrapper>
</React.StrictMode>,
document.getElementById('root')
);
The MobileWrapper should handle which to show the children props or "MobileLockout" component
function MobileWrapper({ children }}) {
const isMobile = ..
if (isMobile) return <MobileLocout />
return children
}
If check in App.js it is work
import logo from './logo.svg';
import './App.css';
function App() {
if (tooSmall || isMobile) {
return (
<MobileLocout />
)
} else {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;