title: ReactJS - Responsive Layout using Media Queries
body: <p>I am working on a web app, and I am trying to make it responsive, but I am running into a few problems. I am using media queries to detect if the screen width is &gt; than a certain amount or &lt; than a certain amount. Based on that, I would want to change the layout of my component, so that it does not cram and move everything out of alignment. However, it seems like if my goal is to reorder the child components within my component using conditional rendering based on the media query result, then my code would be repeated multiple times. Hence, I am checking to see if there are any other ways to accomplish this.</p>
  <p>Below is a screenshot of the browser when the screen size gets smaller, the contents get too cramped up, and hence it messes up the alignment.</p>
  <p><a href="https://i.stack.imgur.com/N2yiE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N2yiE.png" alt="" /></a></p>
  <p>Below is a snippet of my code (this code represents the right side of the image -&gt; Revenue and Revenue KPI)</p>
  <pre><code>&lt;Row justify=&quot;space-around&quot;&gt;
      &lt;Col span={11}&gt;
          &lt;Statistic
              title=&quot;Revenue&quot;
              value={data[metric].revenue}
              valueStyle={{ color: '#3f8600' }}
          /&gt;
      &lt;/Col&gt;
      &lt;Divider type=&quot;vertical&quot; /&gt;
      &lt;Col span={11}&gt;
          Revenue KPI
          &lt;Button shape='circle' size='small' onClick={() =&gt; handleClick('rev', metric, 'post')} style={{ marginLeft: '5%' }}&gt;
              &lt;PlusOutlined /&gt;
          &lt;/Button&gt;
          &lt;Statistic
                  value={data[metric].rev_kpi}
                  valueStyle={{ color: '#3f8600' }}
          /&gt;
      &lt;/Col&gt;
  &lt;/Row&gt;
  </code></pre>
  <p>What I would want to do, is to change the grid layout once the screen width is smaller than a certain amount, and instead of the components above being in the same Row, I would want each to be in their Row (stacking on top of each other). However, if I were to do this using conditional rendering, it seems like I would have to repeat the code quite a fair bit, which seems tedious and messy. Hence, I am hoping if there are any more efficient methods to achieve what I would want to make.</p>
  <p>The UI package I am using is AntD (where I got the components for Row, Col, Statistic, Button)
  <a href="https://ant.design/components/grid/" rel="nofollow noreferrer">https://ant.design/components/grid/</a></p>
  <p>this is my media query function (I use this function to return a boolean based on the query I pass in)</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  
  function useMediaQuery(
      query,
      defaultMatches = window.matchMedia(query).matches
  ) {
      const [matches, setMatches] = useState(defaultMatches);
  
      useEffect(() =&gt; {
          const media = window.matchMedia(query);
  
          if (media.matches !== matches) setMatches(media.matches);
  
          const listener = () =&gt; setMatches(media.matches);
  
          media.addListener(listener);
  
          return () =&gt; media.removeListener(listener);
      }, [query, matches]);
  
      return matches;
  }
  
  export default useMediaQuery;
  </code></pre>
  <p>All help is appreciated, thanks all! Do guide me along as I am new to React and especially new to implementing responsive websites!</p>