(SemanticUI + React) Changing HTML elements based on screen size best approach?

Question

For example lets say I want to remove images when display size falls below 600px width. What would be the cleanest, fastest and most maintainable method to do that?

  <div class="card"> 
      <div class="image">
          <img src="http://placehold.it/256x256">
      </div> 

      <div class="content">
              <a class="header">Kristy</a>
          <div class="meta">
              <span class="date">Joined in 2013</span>
          </div>
          <div class="description">
              Kristy is an art director living in New York.
          </div>
      </div>
      <div class="extra content">
          <a>
              <i class="user icon"></i>
              22 Friends
          </a>
      </div>
  </div>

jQuery method

EDIT: Definitely not using jQuery (it works, but read below):

jQuery Free

jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representation of the real DOM). React only writes patch updates to the DOM, but never reads from it.

It is not feasible to keep real DOM manipulations in sync with React's virtual DOM. Because of this, all jQuery functionality has been re-implemented in React.

<script>
  $(window).resize(function () {
     if (window.innerWidth < 600) { //Some arbitrary mobile width
        $(".image img").attr("src", "");
     } else {
        $(".image img").attr("src", "http://placehold.it/256x256");
     }
  });
</script>

SemanticUI method (Doc)

<div class="ui container desktop only grid">
  Contents
</div>

Using React only?

  render() {
    let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
    return(<div>
        <div>{content}</div>
        <childComponent myWidth= {this.state.width}></childComponent >
        <childComponent2 myWidth= {this.state.width}></childComponent2 >
   </div>
  )

A CSS media query could apply a display none to images if the width is below a given value. — Taplar, Dec 05 '17 at 22:17
Definitely CSS and a system of class names that allows elements to be indentified as being hidden when screen width (or height, though in my experience width is vastly more important) is below (or above) some threshold. — Pointy, Dec 05 '17 at 22:18

score 1 · Answer 1 · answered Dec 05 '17 at 22:27

Use a media query and attach to your class. e.g.

HTML:

 <div class="image hideOnSmallScreen">
              <img src="http://placehold.it/256x256">
          </div>

CSS:

.image {
   display:block;
}

/* Small screens */
@media all and (max-width: 700px) {
   .image.hideOnSmallScreen {
      display:none;
   }
}

score 1 · Accepted Answer · answered Dec 05 '17 at 22:29

If your GUI changes significantly between the two versions, it may be worth it to maintain two sets of components, where appropriate. Then, you can render them like this:

render() {
    // don't create the component here with <>, just choose which one to use
    let TheComponent = this.state.width < 600 ? MobileComponent : DesktopComponent;

    return (
        <div>
            <TheComponent prop1=... />
            ...
        </div>
    );
}

The advantage is that you don't create DOM nodes which are not needed, so the performance might be better compared to CSS-only solutions. And, it's sometimes much easier to reshuffle things around. The disadvantage is obviously that more code is required.

(SemanticUI + React) Changing HTML elements based on screen size best approach?

2 Answers2