Render different files on a progressive web app for mobile version

Question

If I have a progressive web app built with React, it's possible to render different files for mobile version?

Answer 1

you can use this library https://www.npmjs.com/package/react-device-detect it will give you a variable called isMobile, you can render like this

import {isMobile} from 'react-device-detect';

function App() {
  renderContent = () => {
    if (isMobile) {
      return <div> This content is available only on mobile</div>
    }else{
      return <div> This content is available only on desktop</div>
    }
    return <div> ...content rendered on both </div>
  }

  render() {
    return this.renderContent();
  }
}

if you don't want to use an extra library for this, you can define isMobile as a state yourself, and update it based on screen size.