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'; }
}10 Answers
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;09-10-2021 Edit: replaced addListener with addEventListener as former was deprecated. Thanks to John Galt for letting us know by posting a comment.
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.
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.
0The 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;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
1You 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.
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> );
}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!
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
1const 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.
