/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 vote87 views1 answer
Open xcode shorthand react native
Javascript React
0 vote137 views1 answer
Add Multilanguage Support to React App
Javascript React
6 votes141 views1 answer
Import useHistory react-router-dom version 6
Javascript React
15 votes142 views3 answers
Image source react native
Javascript React
1 vote153 views1 answer
React native scrollview sticky header
Javascript React
0 vote129 views1 answer
Render first index active tabs in reactjs
Javascript React
12 votes133 views2 answers
React native flatlist container style
Javascript React
64 votes171 views7 answers
React router
Javascript React
0 vote133 views2 answers
Jest simulate toggle switch react native
Javascript React
0 vote132 views1 answer
React native tdd emzyme
Javascript React