/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 vote411 views1 answer
Check scroll top height in react js
Javascript React
1 vote363 views1 answer
Adding int and string in react props
Javascript React
0 vote491 views1 answer
React native load function each time visit screen
Javascript React
0 vote361 views1 answer
Firebase timestamp to date react
Javascript React
0 vote382 views1 answer
React-scripts not found
Javascript React
0 vote370 views1 answer
How to make a github api using react
Javascript React
16 votes401 views2 answers
Where to put background images in react app
Javascript React
7 votes405 views4 answers
Get parameter from url reactjs
Javascript React
0 vote398 views1 answer
How to add abutton component to drawer in react native
Javascript React
0 vote374 views1 answer
Formdata append react js
Javascript React