How to switch between desktop and mobile version if I use React MediaQuery components

Question

I have to create desktop/mobile switcher in my project but I couldn't realised how to do it with React MediaQuery components. Here is an example from their GitHub

var MediaQuery = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>
        <MediaQuery minDeviceWidth={1224}>
          <div>You are a desktop or laptop</div>
          <MediaQuery minDeviceWidth={1824}>
            <div>You also have a huge screen</div>
          </MediaQuery>
          <MediaQuery maxWidth={1224}>
            <div>You are sized like a tablet or mobile phone though</div>
          </MediaQuery>
        </MediaQuery>
        <MediaQuery maxDeviceWidth={1224}>
          <div>You are a tablet or mobile phone</div>
        </MediaQuery>
        <MediaQuery orientation='portrait'>
          <div>You are portrait</div>
        </MediaQuery>
        <MediaQuery orientation='landscape'>
          <div>You are landscape</div>
        </MediaQuery>
        <MediaQuery minResolution='2dppx'>
          <div>You are retina</div>
        </MediaQuery>
      </div>
    );
  }
});

I can change viewport meta tag to control everything which I describe in my css files. But how to enable/disable React MediaQuery component?

Answer 1

As far as I can understand your question, something like this should work.

var MediaQuery = require('react-responsive');

var A = React.createClass({
  render: function(){
    let mediaComponent;
    if(/*  enableMediaComponent   */) {
        mediaComponent = <MediaQuery minDeviceWidth={1224}>
            <div>You are a desktop or laptop</div>
            <MediaQuery minDeviceWidth={1824}>
              <div>You also have a huge screen</div>
            </MediaQuery>
            <MediaQuery maxWidth={1224}>
              <div>You are sized like a tablet or mobile phone though</div>
            </MediaQuery>
          </MediaQuery>
          <MediaQuery maxDeviceWidth={1224}>
            <div>You are a tablet or mobile phone</div>
          </MediaQuery>
          <MediaQuery orientation='portrait'>
            <div>You are portrait</div>
          </MediaQuery>
          <MediaQuery orientation='landscape'>
            <div>You are landscape</div>
          </MediaQuery>
          <MediaQuery minResolution='2dppx'>
            <div>You are retina</div>
          </MediaQuery>
    } else {
      mediaComponent = // whatever you want to render when your MediaQuery is disabled
    }
    return (
      <div>
        <div>Device Test!</div>
        {mediaComponent}
      </div>
    );
  }
});