/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

17 votes144 views6 answers
React native build android
Javascript React
0 vote137 views1 answer
The email address is badly formatted react
Javascript React
0 vote149 views1 answer
Show and Hide element in react
Javascript React
2 votes151 views1 answer
Display image as big as possible react native
Javascript React
1 vote154 views1 answer
Unexpected token. did you mean `{'>'}` or `>`? react
Javascript React
15 votes156 views3 answers
Image source react native
Javascript React
0 vote159 views1 answer
Can you wrap redux provider within react.strictmode
Javascript React
2 votes233 views1 answer
Get current screen name react navigation
Javascript React
0 vote214 views1 answer
Coreui react change background color
Javascript React
55 votes149 views6 answers
Useref in react
Javascript React