/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 votes99 views1 answer
How to do a classname variable and string react
Javascript React
0 vote93 views1 answer
React Native Expo Scrollview Scroll to bottom
Javascript React
5 votes92 views2 answers
React onclick new tab
Javascript React
0 vote92 views1 answer
Making a react js website project ready for hosting
Javascript React
0 vote110 views1 answer
Onclick on fragment react
Javascript React
16 votes88 views2 answers
Render text in for loop react in function
Javascript React
142 votes246 views3 answers
Install react app
Javascript React
0 vote94 views1 answer
React index.js file
Javascript React
0 vote114 views1 answer
React native load function each time visit screen
Javascript React
0 vote96 views1 answer
React native get uri of the image in the app assets folder
Javascript React