React change item per row when resizing the window

Question

How to change item per row when resizing the window or are there any plugins? for example:

on PC:

<div class="row">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
</div>

on Tablet:

<div class="row">
  <div>item 1</div>
  <div>item 2</div>
</div>
<div class="row">
  <div>item 3</div>
  <div>item 4</div>
</div>

on Mobile

<div class="row">
  <div>item 1</div>
</div>
<div class="row">
  <div>item 2</div>
</div>
<div class="row">
  <div>item 3</div>
</div>
<div class="row">
  <div>item 4</div>
</div>

Do this answer your question https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react ? — Dani, Jun 03 '21 at 16:39
Does this answer your question? [Flexbox responsive row column layout](https://stackoverflow.com/questions/46627848/flexbox-responsive-row-column-layout) — Aidan Hakimian, Jun 03 '21 at 16:39
No, it's not @AidanHakimian. I mean break to a new row. You can see an example website here canva.com ( https://www.canva.com/photos) — HungNguyen, Jun 03 '21 at 16:47
@Dani You can see an example here ( https://www.canva.com/photos) — HungNguyen, Jun 03 '21 at 16:48
Requirement is not something needs the changes in the way elements are arranged in jsx template. It just requires a style for divs with proper @media queries to select different screen size.. libraries like bootstrap and material provides simple flex box classes like col-sm col-md col-lg.. please have a look on that — Karthikeyan, Jun 03 '21 at 17:23

score 0 · Answer 1 · answered Jun 03 '21 at 17:09

You can try something like this, you should define the sizes by yourself

const Component = (props) => {
    const [screenSize, setScreenSize] = useState(1024);

    useLayoutEffect(() => {
        setScreenSize(window.innerWidth);
        window.addEventListener('resize', () => setScreenSize(window.innerWidth));
        return () => window.removeEventListener('resize', () => setScreenSize(window.innerWidth));
    }, []);

 if(screenSize <= 480) {
    return <div className="mobile"></div>
 }
 if(screenSize > 480 && screenSize <=  640) {
    return <div className="mobile-landscape"></div>
 }
 if(screenSize > 480 && screenSize <=  640) {
    return <div className="mobile-landscape"></div>
 }
 if(screenSize > 640 && screenSize <=  1024) {
    return <div className="tablets"></div>
 }
 // desktop
 return <div className="desktop"></div>
}

React change item per row when resizing the window

1 Answers1