I'm using React with styled-components, so let's say I have a div like this:
export const Container = styled.div`
display: flex;
flex-direction: column;
`return (
<Container
onMouseEnter{() => alert("foo")}
onMouseLeave{() => alert("bar")}
>
Content
</Container>
)How do I disable these alerts (onMouseEnter/onMouseLeave events) when the device screen width is less than 700px?
You can use Window.matchMedia()
if ( window.matchMedia('(max-width: 700px)').matches ) {
// your function executed below 700px window width
}