/Javascript/React/React lottie player on hover

React lottie player on hover

import lottieJson from './lottie.json'


const [play, setPlay] = useState(false);

function startPlay() {
  setPlay(true);
}

function stopPlay() {
  setPlay(false);
}

<div className="col-md-5" onMouseEnter={startPlay} onMouseLeave={stopPlay}>
  <Lottie
    className={"img-fluid"}
    animationData={lottieJson}
    mode={"bounce"}
    speed={2}
    play={play}
    loop
    style={{width: "400px", height: "400px", background: "#FFFFFF"}}
    ref={lottieRef}
  />

</div>

Similar codes

0 vote103 views1 answer
How to get the data from clicking on notification on web in reactjs
Javascript React
105 votes132 views1 answer
Create react app scaffolding
Javascript React
0 vote122 views1 answer
React native parent opcaity not affecting text
Javascript React
5 votes95 views2 answers
React img not showing
Javascript React
0 vote108 views1 answer
How we can set react select required
Javascript React
3 votes97 views1 answer
How to go to another page onclick in react
Javascript React
1 vote108 views1 answer
React-router-dom v6 redirect
Javascript React
0 vote96 views1 answer
How to create module in react
Javascript React
5 votes117 views2 answers
Remove underline from link i react
Javascript React
0 vote103 views1 answer
React native webview disable touch
Javascript React