/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

1 vote381 views1 answer
How to use cookies in react js
Javascript React
0 vote372 views1 answer
How to upload react js project on server
Javascript React
0 vote285 views2 answers
Selected css based on route react
Javascript React
0 vote326 views1 answer
React add link to button
Javascript React
0 vote353 views1 answer
Dlowlad the json fiel in react js pretty formate
Javascript React
0 vote331 views1 answer
React call component state
Javascript React
3 votes311 views2 answers
React is there a safe area view for android
Javascript React
0 vote308 views1 answer
Floating button react
Javascript React
4 votes313 views1 answer
Enable emmit on react
Javascript React
0 vote293 views1 answer
Array of refs react
Javascript React