Sobes.tech
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`.