React: multiple JSX templates for one single component

Question

I am a React newbie and I am developing a React application initially created using create-react-app module and I need it to be adapted to Mobile devices(browser)... For that I am facing the problem of having a Mobile and a Web version of the same component. I was wondering if there is a way to optimise the process of two separate components by only having 2 different JSX rendering template and keeping the same code base. I mean loading specific JSX depending on device and place it in the render method.

Any help will be appreciated Thanks in advance

Answer 1

try react-responsive library.

you can render the different component based on mediaQuery

lib reference

import MediaQuery from 'react-responsive';

const Example = () => (
  <div>
    <div>Device Test!</div>
    <MediaQuery query="(min-device-width: 1224px)">
      <div>You are a desktop or laptop</div>
      <MediaQuery query="(min-device-width: 1824px)">
        <div>You also have a huge screen</div>
      </MediaQuery>
      <MediaQuery query="(max-width: 1224px)">
        <div>You are sized like a tablet or mobile phone though</div>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery query="(max-device-width: 1224px)">
      <div>You are a tablet or mobile phone</div>
    </MediaQuery>
    <MediaQuery query="(orientation: portrait)">
      <div>You are portrait</div>
    </MediaQuery>
    <MediaQuery query="(orientation: landscape)">
      <div>You are landscape</div>
    </MediaQuery>
    <MediaQuery query="(min-resolution: 2dppx)">
      <div>You are retina</div>
    </MediaQuery>
  </div>
);

Answer 2

i'm using Semantic-ui React and there is a Responsive component that you can render ad specific component and specify the resolution: for example

<Responsive as={Grid} {...Responsive.onlyMobile} columns='equal' >
   //stuff for mobile
</Responsive>

<Responsive as={Grid} {...Responsive.onlyTablet} columns='equal' >
   //stuff for tablet
</Responsive>

Answer 3

You can use something like Bootstrap. If this does not solve the problem. Then you can have some Flag State and have two functions returning different JSX markup. You will have to write logic for detecting Mobile.

Answer 4

Other answer rely on screen size (that can lead to false positives), this solution relies on detecting mobile devices

You can use react-device-detect

<BrowserView>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
    <h1> This is rendered only on mobile </h1>
</MobileView>

This can wrap a single view or an entire set of routes inside a <Switch />

Answer 5

We can use Rebass library which is used to build the responsive component for mobile, tablet and desktop as well. Along with we can use styled component , so that we can easily style our component based on our own CSS.

https://rebassjs.org/

https://www.styled-components.com/