'Play video when hover a card and show a default image when not hovering in react js

I have a list of videos. I only need to play the video when hover it. Other wise in need to show a default image that I have provided.

Lets say I have a coding like this. When I hover the card it need to play the video and when I am not hovering it need to show an image.

<Card>
     <video src={video} />
</Card>

I have used the npm package react-hover-video-player, but I don't to use an external package to do this. Is there a way to do this in React JS (Typescript)?

javascriptcssreactjstypescript


Solution 1:[1]

How about make a new state for hovering and render conditionally ?

const [hover, setHover] = useState(false);

<Card
  onMouseEnter={(e:React.MouseEvent) => setHover(true)}
  onMouseLeave={(e:React.MouseEvent) => setHover(false)}
>
     {hover ? <video src={video} /> : <image src={image} />}
</Card>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 J young

Related Questions