Saltar al contenido

ancho de pantalla en el ejemplo del código de react js

Bienvenido a nuestro sitio, ahora vas a hallar la respuesta que estabas buscando.

Ejemplo 1: reaccionar para obtener el ancho de la pantalla

// useWindowDimensions.jsimport useState, useEffect from'react';exportdefaultfunctionuseWindowDimensions()const hasWindow =typeofwindow!=='undefined';functiongetWindowDimensions()const width = hasWindow ?window.innerWidth:null;const height = hasWindow ?window.innerHeight:null;return
      width,
      height,;const[windowDimensions, setWindowDimensions]=useState(getWindowDimensions());useEffect(()=>if(hasWindow)functionhandleResize()setWindowDimensions(getWindowDimensions());window.addEventListener('resize', handleResize);return()=>window.removeEventListener('resize', handleResize);,[hasWindow]);return windowDimensions;// yourComponent.jsimportuseWindowDimensionsfrom'./hooks/useWindowDimensions';constComponent=()=>{const height, width =useWindowDimensions();/* you can also use default values or alias to use only one prop: */// const  height: windowHeight = 480  useWindowDimensions();return(<div>
      width:width~ height:height</div>);

Ejemplo 2: reaccionar js obtiene el tamaño de la pantalla

console.log(window.innerHeight);

Recuerda que tienes permiso de glosar si te fue de ayuda.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *