/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 vote190 views2 answers
React firebase hooks
Javascript React
0 vote187 views1 answer
Ionic react exit app
Javascript React
2 votes188 views2 answers
React Hook Form
Javascript React
4 votes217 views1 answer
React props.children proptype
Javascript React
0 vote185 views1 answer
React-big-calendar styling
Javascript React
0 vote180 views1 answer
Calculations inside a render function react js
Javascript React
1 vote194 views2 answers
Cannot read property of undefined (reading 'push') react
Javascript React
0 vote192 views1 answer
Return multiple native element react native
Javascript React
0 vote310 views1 answer
Canvas js in react
Javascript React
0 vote227 views1 answer
How to pass an id to the route of a seprate file react
Javascript React