/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 vote321 views1 answer
Create a link in react js to download xcelfile
Javascript React
0 vote321 views2 answers
Reactjs firebase timestamp to date
Javascript React
18 votes307 views4 answers
React for loop in render
Javascript React
0 vote292 views1 answer
External js doesn't works if revisit the page in react
Javascript React
0 vote306 views1 answer
How to convert react component to image
Javascript React
0 vote283 views1 answer
React native hide stack navigator title
Javascript React
0 vote290 views2 answers
Loader in react
Javascript React
0 vote309 views1 answer
React native typescript nodejs timeout
Javascript React
1 vote299 views1 answer
React form reload page
Javascript React
0 vote276 views1 answer
Install reactivesearch
Javascript React