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

react use media query

Handsome Horse answered on April 13, 2022 Popularity 10/10 Helpfulness 2/10

answer react use media query

related media query in react js

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 media

Link to this answer
Share Copy Link

Contributed on Aug 26 2022

Handsome Horse

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

react use media query

Contents

More Related Answers

react use media query

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.