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

media query in react js

Add Answer

Raviraj Solanki answered on January 5, 2022 Popularity 10/10 Helpfulness 6/10

answer media query in react js

related media query in jsx

related react use media query

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 media

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Raviraj Solanki

0 Answers Avg Quality 2/10

Closely Related Answers

media query in jsx

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 05 2022

Beautiful Boar

0 Answers Avg Quality 2/10

react use media query

Comment

//i used bootstrap carousel where i dynamically changed its height for mobile.
import Carousel from 'react-bootstrap/Carousel';
import 'bootstrap/dist/css/bootstrap.min.css';
import {useState, useEffect} from 'react';

function MyCarousel() {

  const [carouselHeight,setCarouselHeight] = useState("500px");

  const img_style = { //style constant used to set carousel height below
      height: carouselHeight,
  }

  useEffect( () => {  //this useEffect Hook will trigger only once when this component is mounted (loaded) to DOM
      if(window.innerWidth <= 382){
        setCarouselHeight("200px");
      }
  })

  return (
    <Carousel fade style={img_style}>
      <Carousel.Item>
        <img
          style={img_style}
          className="d-block w-100"
          src="images/carousel1.jpg"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          style={img_style}
          className="d-block w-100"
          src="images/carousel2.jpg"
          alt="Second slide"
        />

        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          style={img_style}
          className="d-block w-100"
          src="images/carousel3.jpg"
          alt="Third slide"
        />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default MyCarousel;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 26 2022

Handsome Horse

0 Answers Avg Quality 2/10

media query in react js

Contents

More Related Answers

media query in react js

Closely Related Answers

media query in jsx

react use media query

Grepper

Documentation

Social

Legal

Contact

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