/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

7 votes115 views4 answers
Import image in react js
Javascript React
28 votes137 views1 answer
Semantic ui dropdown value react
Javascript React
36 votes107 views2 answers
Ref hook in react
Javascript React
0 vote121 views1 answer
Reactjs events list
Javascript React
0 vote112 views1 answer
How to give radius to imagebackground in react native
Javascript React
21 votes99 views4 answers
Setinterval react
Javascript React
1 vote113 views1 answer
Column width table react
Javascript React
0 vote406 views1 answer
React navigation 4
Javascript React
0 vote104 views1 answer
Yarn react-native-async-storage
Javascript React
0 vote108 views1 answer
Unexpected token useeffect react native
Javascript React