/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 vote134 views1 answer
Mock createRef jest react functional component
Javascript React
5 votes148 views3 answers
React routes multiple compoenents
Javascript React
0 vote148 views1 answer
How to add css based on route react
Javascript React
1 vote159 views1 answer
Type writer in react
Javascript React
0 vote138 views1 answer
Gradlew command not found react native
Javascript React
0 vote158 views1 answer
How to install yup in react native
Javascript React
0 vote172 views1 answer
React native app slow lagging image
Javascript React
0 vote135 views2 answers
Automated counter with react hooks
Javascript React
0 vote147 views1 answer
React replace all line breaks with br
Javascript React
25 votes173 views5 answers
Image react
Javascript React