/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 vote389 views1 answer
React native float upto 2 digits
Javascript React
1 vote390 views1 answer
React repeat
Javascript React
0 vote369 views1 answer
Add pdf in react app
Javascript React
1 vote356 views1 answer
How to paste in android emulator react nativ etext input
Javascript React
0 vote362 views1 answer
Which algorithm React is used to compare dom?
Javascript React
0 vote395 views1 answer
Eslint init settings for ReactJS
Javascript React
0 vote373 views1 answer
Outline none react native web
Javascript React
0 vote343 views1 answer
React s.a.createElement("div",{className:"d-none d-lg-flex flex-content"},s.a.createElement(u.a.Body,{noScroll:!0}
Javascript React
0 vote372 views2 answers
Editable pre input react
Javascript React
131 votes588 views6 answers
Creating react app
Javascript React