Media query syntax for Reactjs

Question

How do I do the following CSS media query in Reactjs?

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

I tried the following but it throws a syntax error and fails to compile.

heading: {
  textAlign: 'right',
  @media (maxWidth: '767px') {
    textAlign: 'center';
  }
  @media (maxWidth: '400px') {
    textAlign: 'left';
  }
}

score 47 · Answer 1 · edited Aug 29 '23 at 11:16

47

You can make media queries inside React:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { matches: window.matchMedia("(min-width: 768px)").matches };
  }

  componentDidMount() {
    const handler = e => this.setState({matches: e.matches});
    window.matchMedia("(min-width: 768px)").addEventListener('change', handler);
  }
  render() {
    return (
      <div >
      {this.state.matches && (<h1>Big Screen</h1>)}
      {!this.state.matches && (<h3>Small Screen</h3>)}
      </div>
    );
  }
}

export default App;

https://stackblitz.com/edit/react-cu8xqj?file=src/App.js

edited Aug 29 '23 at 11:16

idmean

14,540
9
54
83

answered Nov 19 '19 at 14:23

Ferit

8,692
8
34
59

Hello @ferit, am I right to say .. we have to create different components to handle Big Screen and small screen? So every screens I have will need to create for both big and small? – Tommy Leong Apr 05 '20 at 05:39
@TommyLeong No. It only re-renders when screen size changes. – Ferit Apr 05 '20 at 11:27
1

Yes i understand. My ques is, to tackle diff screen size, am I suppose to create different view and render based on screen size? – Tommy Leong Apr 05 '20 at 14:58
@TommyLeong Exactly. – Ferit Apr 05 '20 at 15:00
I see.. wouldn't it be too much work say if I have 50 screens? Can we use make use of media query to tackle this? – Tommy Leong Apr 06 '20 at 02:54
3

@TommyLeong That's responsive design. You can't have 50 screens, but maybe at most 5 different layouts you can need. Regardless of React and this answer you have to define each of them separately to obtain a responsive design. – Ferit Apr 06 '20 at 09:37
While interesting, I would recommend against this approach as implemented. Responsive design does not mean you should write multiple versions of every component, and in fact this is what media queries allow you to avoid. Using the listener to conditionally apply styles might be better, but even then it seems like it may get complex fast. Most people would be better off with the answer @josh-pittman gave or using a library as others have suggested. – Eric Streeper Dec 22 '20 at 04:18
@Streeper The effect is the same with using a css file. Also, I did not say you should write multiple instances of components but you should write multiple instances of rulesets to obtain a responsiveness, which is universal, meaning that you have to do it no matter what approach you take. – Ferit Dec 22 '20 at 09:33
1

You can trim this function a bit more by eliminating the ```handler```, the result would be this: ```window.matchMedia('(min-width: 768px)').addEventListener('change', (e) => this.setState({ matches: e.matches }))``` – Marcos Guerrero Dec 17 '21 at 22:46
Yeah, you are right, using an anonymous handler. But I wanted it to be explicitly defined to make it easier to understand for visitors. – Ferit Dec 19 '21 at 08:30
1

If by any chance somebody stumbles over an issue trying to get @ferit answer to work, check your query string! For me, I forgot to put the parenthesis around the query string. So `window.matchMedia('max-width: 720px').matches` did not work, but `window.matchMedia('(max-width: 720px)').matches` did work. Thank you, @ferit! – rubybeginner May 16 '22 at 19:11

Marcos Guerrero · Answer 2 · 2022-02-10T00:33:42.963

The answer given by Ferit turned out to be quite useful, however, it was only the example in class components, but it is usually difficult or cumbersome to apply that to functional components, and since sometimes it is problematic to transform a functional component to a class one, here I leave the example using Hooks

import React, { useState, useEffect } from 'react';

const App = () => {
  const [matches, setMatches] = useState(
    window.matchMedia("(min-width: 768px)").matches
  )

  useEffect(() => {
    window
    .matchMedia("(min-width: 768px)")
    .addEventListener('change', e => setMatches( e.matches ));
  }, []);

  return (
    <div >
      {matches && (<h1>Big Screen</h1>)}
      {!matches && (<h3>Small Screen</h3>)}
    </div>
  );
}

export default App;

Yes, just forget to write that in the example – Marcos Guerrero Jan 18 '23 at 02:52 — Marcos Guerrero, Jan 18 '23 at 02:52

score 21 · Accepted Answer · answered Feb 02 '19 at 11:17

21

If you have a special cases, when you need to get media query result inside you react app (for example, you want to show some component at mobile version), you can use helpers like react-responsive or react-media-hook.

answered Feb 02 '19 at 11:17

Ilya Lesik

254
1
4

The problem with this answer, apart from not containing an example, is that it adds listeners for each component needing a media query. If you use it inside a list item or a cell table, you can easily amass absurd amounts of event listeners, which is completely unnecessary. They should only be added once. I've provided [an answer](https://stackoverflow.com/a/76999879/1891677) showing how this can be done with minimal impact on runtime performance, using a context provider. – tao Aug 29 '23 at 15:55

score 19 · Answer 4 · edited Mar 24 '21 at 18:28

19

You cannot set media queries inline. You will need to create a separate CSS stylesheet and then import the stylesheet.

So the following code would go in a new styles.css file for example.

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

Then you can import your new CSS styles file into your react file. For example, you could add import './styles.css' to the top of your App.jsx file (assuming they are both at the root level), or you could import it directly into a specific react component file.

edited Mar 24 '21 at 18:28

Abraham

8,525
5
47
53

answered Feb 02 '19 at 09:24

Josh Pittman

7,024
7
38
66

2

Hello, it's not true, see my answer. – Ferit Nov 19 '19 at 14:25
1

Neat. Nice update. There was no need to vote my answer down though. This is via a web api, I meant that you can't use media queries inline. This is still true. – Josh Pittman Nov 20 '19 at 12:07
You are right, my solution is not inline either, so no way to do inline queries. But you are also wrong because your answer implies there is no way to make media queries inside React. That's why I downvoted. – Ferit Nov 20 '19 at 14:36
I did not imply there is no way to use media queries inside react, my answer specifically outlines how to use media queries in react. – Josh Pittman Nov 21 '19 at 06:34
You consider external css files as "inside"? – Ferit Nov 21 '19 at 06:56
5

Who said anything about inside? I'm not sure what you mean by inside. The question doesn't specify anything about 'inside'. The approach above is how I use media queries in my react projects. This is starting to get petty now. I think your comment is a great addition to the answer, but marking down other correct ways of doing the same thing is counterproductive. – Josh Pittman Nov 21 '19 at 07:12
1

Maybe I assumed it should be inside. OK. Please do a trivial change to your answer so I can revert my downvote. – Ferit Nov 21 '19 at 07:40

score 11 · Answer 5 · answered Jun 28 '21 at 17:37

11

Another way of writing media query in reactjs project:

style.js file:

root: {
 background: "white",

 "@media (max-width: 1920px)": {
   background: "red",
 }
}

style.css file:

.root: {
 background: "white";

 @media (max-width: 1920px) {
   background: "red";
 }
}

Thank you

answered Jun 28 '21 at 17:37

Nikhil Gowda

417
5
16

In case of using material UI try this: https://material-ui.com/customization/breakpoints – Nikhil Gowda Aug 26 '21 at 05:43

score 9 · Answer 6 · answered Mar 24 '21 at 23:17

You can use styled-components if you're used to using css. It would look something like this.

import React from 'react';
import Styled from "styled-components";

function YourComponent() {

    const heading = Styled.h1`
        Text-align:right;

            @media (max-width: 767px) {
                text-align: center;
            }
            @media (max-width: 400px) {
                text-align: left;
            }
    `;

   return(
        <>
           <heading>This is my heading</heading>
        </>
    )
}

If you have a lot of styling you need to do you can do your styles in another js file and import each style as needed. If you do this don't forget to export your style.

score 2 · Answer 7 · answered Dec 19 '20 at 21:58

in my case i was using a custom hook to generate some breakpoint values for me:

import { useMediaQuery } from 'react-responsive';

export const useBreakpoints = () => {
  const isMobileSmall = useMediaQuery({ query: '(max-width: 325px)' });
  const isMobileMid = useMediaQuery({ query: '(max-width: 375px)' });
  const isMobileFloor = useMediaQuery({ query: '(max-width: 425px)' });

  const isTabletFloor = useMediaQuery({ query: '(max-width: 426px)' });
  const isTabletMid = useMediaQuery({ query: '(max-width: 768px)' });
  const isTabletCeil = useMediaQuery({ query: '(max-width: 1024px)' });

  const isLaptopFloor = useMediaQuery({ query: '(max-width: 1025px)' });
  const isLaptopCeil = useMediaQuery({ query: '(max-width: 1440px)' });

  const isXHDFloor = useMediaQuery({ query: '(max-width: 1441px)' });
  const isXHDCeil = useMediaQuery({ query: '(max-width: 4096px)' });

  return {
    isMobileSmall,
    isMobileMid,
    isMobileFloor,
    isTabletFloor,
    isTabletMid,
    isTabletCeil,
    isLaptopFloor,
    isLaptopCeil,
    isXHDFloor,
    isXHDCeil,
  };
};

and i was calling it in my component inside of useMemo, which is incorrect :)

so i put it outside of useMemo and it worked as charm!

basically what i'm trying to point you at is avoid using nested hook call!

score 2 · Answer 8 · answered Aug 24 '22 at 20:12

you can just make your own custom hook like this working snippet of code

hooks/useStyleMediaQuery.js

import { useState, useEffect } from 'react'

export const useStyleMediaQuery = ({ mixOrMax, widthOrHeight, value }) => {

  if (!mixOrMax) mixOrMax = 'min';
  if (!widthOrHeight) widthOrHeight = 'width';

  const [matches, setMatches] = useState(
    window.matchMedia(`(${mixOrMax}-${widthOrHeight}: ${value}px)`).matches
  )

  useEffect(() => {
    window
      .matchMedia(`(${mixOrMax}-${widthOrHeight}: ${value}px)`)
      .addEventListener('change', e => setMatches(e.matches));
  }, [mixOrMax, widthOrHeight, value]);

  return { matches }

}

App.js

import { useStyleMediaQuery } from 'hooks/useStyleMediaQuery'

import ComponentIwantToShowOnlyOnMobile from 'components/ComponentIwantToShowOnlyOnMobile'
import ComponentIwantToShowOnlyOnDesktop from 'components/ComponentIwantToShowOnlyOnDesktop'

function App() {

    const { matches: isMobile } = useStyleMediaQuery({ mixOrMax: 'max', widthOrHeight: 'width', value: 767 });
    const { matches: imSmall } = useStyleMediaQuery({ mixOrMax: 'max', widthOrHeight: 'width', value: 400 });

    return (
        <>
            {isMobile && <ComponentIwantToShowOnlyOnMobile />}
            {!isMobile && <ComponentIwantToShowOnlyOnDesktop />}
            {imSmall && <h1>I'm very small.. 400px width or less</h1>}
        </>
    );
}

export default App;

that's it :)

score 1 · Answer 9 · answered Jun 30 '20 at 08:55

1

there is also a way to include a media query by using boolean values for ex.

<div style={{window.innerWidth > 768 ? '800px' : '400px'}}/>

and this serves the problem well

answered Jun 30 '20 at 08:55

Harjaap Dhillon

21
2

4

That's would not make it responsive. Only after refreshing. – msqar Sep 26 '20 at 03:57

score 1 · Answer 10 · answered Apr 11 '21 at 10:44

aphrodite can help.

here is an example:

import React from "react";
import { StyleSheet, css } from "aphrodite";

import "./style.css";

const styles = StyleSheet.create({
  heading: {
    textAlign: "right",
    backgroundColor: "red",
    "@media (max-width: 767px)": {
      textAlign: "center",
      backgroundColor: "green"
    },
    "@media (max-width: 767px)": {
      textAlign: "center",
      backgroundColor: "blue"
    }
  }
});

export default function App() {
  return (
    <div className={css(styles.heading)}>
      <h1>Hello aphrodite!</h1>
    </div>
  );
}

score 1 · Answer 11 · answered Aug 04 '22 at 17:28

1

JSX or reactJS indicatorContainerProps:{ position: 'fixed', right: '0px', bottom: '0%', marginBottom: '40%', display:'flex', justifyContent:'center', flexDirection:'row', alignItems:'center', "@media (orientation:landscape)": { marginBottom: '0px' }

answered Aug 04 '22 at 17:28

user19693683

11
2

tao · Answer 12 · 2023-09-03T00:36:17.280

import { useResponsiveness } from "react-responsiveness";

const { isMax } = useResponsiveness()
// also available: { isMin, isOnly, currentInterval, matches } 
// ...

  heading: {
    textAlign: isMax('sm') 
      ? 'left'
      : isMax('md')
      ? 'center'
      : 'right'
  }

// provider in App.(js|ts):

import { ResponsivenessProvider } from "react-responsiveness";

const breakpoints: {
  sm: 0,
  md: 401,
  lg: 768
}

function App() {
    // ...
}

const ResponsiveApp = () => (
  <ResponsivenessProvider {...{ breakpoints }}>
    <App />
  </ResponsivenessProvider>
);

export default ResponsiveApp;

Documentation and more examples.

Note: I wrote this package myself, because others were adding a set of listeners for each component needing a media query, instead of adding them only once per app, which is best practice (I'm obsessed with runtime performance and user experience).

score 0 · Answer 13 · edited Mar 17 '22 at 20:18

0

const styles = (window.innerWidth > window.innerHeight) ? {
    header: {
        display: 'flex',
        justifyContent: 'center',
    },
    body: {
        boxShadow: '0px 0px 5px black',
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column'
    }
} : {
    // other styles
}

You can use this syntax for your styles.

edited Mar 17 '22 at 20:18

Tyler2P

2,324
26
22
31

answered Feb 09 '22 at 15:37

YassBan

65
10

score 0 · Answer 14 · answered Jul 14 '22 at 08:29

Drop in no dependencies hook solution. Works with server side rendered Nextjs.

const useQuery = (query: string) => {
  const [matches, setMatches] = useState(false)

  const handleChange = (e) => setMatches( e.matches )

  useEffect(() => {
    const m = window.matchMedia(query)

    setMatches(m.matches)
    
    m.addEventListener('change', handleChange);

    return () => {
      m.removeEventListener('change', handleChange);
    }
  }, []);

  return !matches;
}

const Menu= () => {
  const isMobile = useQuery("(min-width: 768px)");
  ...
}

score 0 · Answer 15 · answered Jan 14 '23 at 04:13

If you don't want many complications put the class itself inside the media query and only change whatever should change at that particular query:

.heading {
   text-align: right;
   width: 360px;
   height: fit-content;
   padding: 10px 0px;
   box-shadow: 1px 3px 2px 0px rgb(206, 117, 1);
   display: flex;


/* media queries */

@media (max-width: 767px) {
.heading{
   text-align: center;
}
}

@media (max-width: 400px) {    
.heading{
   text-align: left;
}
}

Media query syntax for Reactjs

15 Answers15

Linked