Media Query Syntax for Reactjs

Media query syntax for Reactjs

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.

How do I add a Media Query to a React CSS object?

According to this discussion You cannot use Media queries with react css objects. You must use stylesheets with class names or other external modules like styled components.

How to apply media query in nextjs

If you are willing to use a third-party library, MUI has exactly what you need in useMediaQuery:

import * as React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery'

export default function SimpleMediaQuery()
{
  const matches = useMediaQuery('(min-width:600px)')

  return <span>{`(min-width:600px) matches: ${matches}`}</span>
}

See the docs linked above for more examples of how to use it.

If you want to avoid another library, here's a simple custom hook:

export const useMediaQuery = (width) =>
{
  const [targetReached, setTargetReached] = useState(false)

  const updateTarget = useCallback((e) =>
  {
    if (e.matches) setTargetReached(true)
    else setTargetReached(false)
  }, [])

  useEffect(() =>
  {
    const media = window.matchMedia(`(max-width: ${width}px)`)
    media.addEventListener('change', updateTarget)

    // Check on mount (callback is not called until a change occurs)
    if (media.matches) setTargetReached(true)

    return () => media.removeEventListener('change', updateTarget)
  }, [])

  return targetReached
}

Usage:

// 600px
const matches = useMediaQuery(600)

Why is my React stylesheet media query not working?

Using hooks in react:

import React from "react";
import { useMediaQuery } from "react-responsive";

export default function Logo() {
  const isDesktop = useMediaQuery({
    query: '(min-aspect-ratio: 1/1)'
  });
  let logo = {};

  if (isDesktop) {
    logo = {
      position: "absolute",
      left: "42vw",
      bottom: "calc(50vh + 4vw)",
      height: "16vw"
    };
  } else {
    logo = {
      position: "absolute",
      left: "38vw",
      bottom: "calc(50vh + 6vw)",
      height: "24vw",
    };
  };

  return (
    <img 
      alt=""
      style={logo}
      src="../logo.png"
    />
  );
};

Remember to download useMediaQuery by typing
npm install react-responsive --save
into the command line.

How can I use media query with emotion/styled/macro?

Nothing special is required. Just add a @media ... query as a property:

import styled from "@emotion/styled/macro";

const StyledUl = styled("ul")({
  "@media (max-width: 600px)": {
    backgroundColor: "#000",
    color: "#fff"
  },
  backgroundColor: "#fff",
  height: "200px",
  width: "calc(100% - 40px)",
  overflowY: "scroll",
  position: "absolute",
  margin: 0,
  padding: "5px",
  boxShadow: "-1px 15px 34px -21px rgba(0,32,86,0.21)",
  boxSizing: "border-box",
  borderRadius: "8px",
  zIndex: 9999
});

export default StyledUl;

Optionally, you can use a template literal to style a styled.HTMLElement:

import styled from "@emotion/styled/macro";

const StyledUlTemplate = styled.ul`
  @media (max-width: 600px) {
    background-color: #000;
    color: #fff;
  }

  background-color: #fff;
  height: 200px;
  width: calc(100% - 40px);
  overflow-y: scroll;
  position: absolute;
  top: 60%;
  margin: 0;
  padding: 5px;
  box-shadow: -1px 15px 34px -21px rgba(0, 32, 86, 0.21);
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 9999;
`;

export default StyledUlTemplate;

Demo (drag the middle bar left/right to resize the Browser tab to trigger the style changes):

---

Related Topics