/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

1 vote169 views1 answer
Picker change event react native
Javascript React
15 votes167 views2 answers
React native get location
Javascript React
1 vote175 views1 answer
React native image border radius not working
Javascript React
1 vote188 views1 answer
Sort function in react js
Javascript React
1 vote224 views1 answer
Rendering in react
Javascript React
8 votes163 views4 answers
Props react
Javascript React
1 vote181 views1 answer
Reactnavigation 5 hide header
Javascript React
0 vote336 views1 answer
How to run electron and react using concurrently
Javascript React
7 votes151 views2 answers
Hover react
Javascript React
6 votes181 views2 answers
React native activity indicator
Javascript React