CODEWITHSUNDEEP
cssreactjsjsxmedia-querieswidth
Rich
Rich

Reputation: 185

How to use Media query syntax for Reactjs

I am working in react js project in which I want to distinguish between Medium Screens OR Big Screen OR Small Screen using the below breakpoints

// Small
@media (max-width: 575px) {}

// Medium
@media (max-width: 990px) {}

// Big
@media {}

Can anyone help by updating this pseudocode https://stackblitz.com/edit/react-cu8xqj?file=src%2FApp.js

Upvotes: 0

Views: 900

Answers (1)

fibbz
fibbz

Reputation: 66

I use stylesheets for resposiveness - specifically the preprocessor Sass. Has a React package and everything. If this works for you, you can use a simple mixins file and import it in any other scss files you might be working in.

In your mixins.scss file:

@mixin tablet {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1280px) {
    @content;
  }
}

And then in any other SCSS files where you want to use those breakpoints:

@use "../../styles/partials/mixins" as *;

.class {
   @include desktop {
     display: flex;
   }
}

This won't be applicable if you are trying to execute JS code upon changing breakpoints. I have an example of that I can dig up if need be.

Upvotes: 1

Related Questions