Middle
Escriba un hook personalizado de React useScreenWidth(targetWidth), que devuelve el ancho actual de la pantalla (screenWidth) y una bandera isMobile (true si el ancho actual es menor que targetWidth). El hook debe actualizarse al cambiar el tamaño de la ventana.
sobes.tech AI
Respuesta de la IA
jsx import { useState, useEffect } from 'react';
function useScreenWidth(targetWidth) { const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(() => { function handleResize() { setScreenWidth(window.innerWidth); }
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const isMobile = screenWidth < targetWidth;
return { screenWidth, isMobile }; }
export default useScreenWidth;
Этот хук отслеживает ширину окна браузера и обновляет состояние при изменении размера. Флаг `isMobile` устанавливается в `true`, если текущая ширина меньше `targetWidth`.