CODEWITHSUNDEEP
javascriptjqueryreactjssemantic-ui
VSB
VSB

Reputation: 242

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

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>
  )

Upvotes: 1

Views: 713

Answers (2)

xs0
xs0

Reputation: 2897

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.

Upvotes: 1

Leo Farmer
Leo Farmer

Reputation: 7910

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;
   }
}

Upvotes: 1

Related Questions