/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

18 votes223 views6 answers
React native android build
Javascript React
0 vote222 views2 answers
React composition
Javascript React
2 votes218 views1 answer
React html input required conditional
Javascript React
1 vote258 views1 answer
Set Custom User Agent react
Javascript React
0 vote246 views1 answer
React.createElement
Javascript React
5 votes211 views3 answers
Linear gradient react js
Javascript React
8 votes253 views3 answers
Icon shwoing a box react native vector icons
Javascript React
15 votes212 views5 answers
Usestate react hook
Javascript React
-3 votes225 views1 answer
React native share
Javascript React
-2 votes232 views1 answer
Reactsj substring
Javascript React