Try adding an EventListener to look for event change if you want to include that functionality. Other than that, you just have to use window.innerWidth instead of window.width inside your component. Also make sure to import the other image you are using
import cclogomobile from '../../assets/cc-logo-mobile.svg'
import React, { useState, useEffect } from 'react'
export default function Image() {
const [largeScreen, setLargeScreen] = useState(false);
useEffect(() => {
// Handler to call on window resize
function handleResize() {
if (window.innerWidth>700) {
setLargeScreen(true);
}
}
// Add event listener
window.addEventListener("resize", handleResize);
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []);
return <img src={largeScreen ? {cclogo}:{cclogomobile}} alt="cclogo" />
}
2
Answers
Try adding an EventListener to look for event change if you want to include that functionality. Other than that, you just have to use
window.innerWidth
instead ofwindow.width
inside your component. Also make sure to import the other image you are usingThe react answer is correct but you really dont need to use an eventListener there is an html picture element that will do this for you.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture