Breaking News: Grepper is joining You.com. Read the official announcement!

media query in jsx

Beautiful Boar answered on January 5, 2022 Popularity 10/10 Helpfulness 4/10

answer media query in jsx

related media query in react js

media query in jsx

Comment

window.matchMedia("(min-width: 768px)").matches

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript jsx media

Link to this answer
Share Copy Link

Contributed on Jan 05 2022

Beautiful Boar

0 Answers Avg Quality 2/10

Closely Related Answers

media query in react js

Comment

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;

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Raviraj Solanki

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

media query in jsx

Contents

More Related Answers

media query in jsx

Closely Related Answers

media query in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.