“Consulta de medios en JSX” Código de respuesta

Consulta de medios en React JS

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;
Raviraj Solanki

Consulta de medios en JSX

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

Respuestas similares a “Consulta de medios en JSX”

Preguntas similares a “Consulta de medios en JSX”

Más respuestas relacionadas con “Consulta de medios en JSX” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código