/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

-2 votes151 views1 answer
Reactjs cut part of string
Javascript React
21 votes166 views6 answers
Shadow in react native
Javascript React
0 vote156 views1 answer
React hooks link to external site
Javascript React
0 vote172 views1 answer
Rn push notification No task registered for key ReactNativeFirebaseMessagingHeadlessTask
Javascript React
6 votes134 views2 answers
React native indicator
Javascript React
2 votes161 views1 answer
Scoll to top on each route react
Javascript React
0 vote208 views1 answer
Custom react native product rating
Javascript React
7 votes152 views4 answers
Import image in react js
Javascript React
1 vote163 views1 answer
Change icon color react native elements
Javascript React
0 vote144 views1 answer
React-native-quick-scroll npm
Javascript React