/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 vote332 views1 answer
React-redux form preventdefault
Javascript React
0 vote355 views1 answer
Svelte reactive async
Javascript React
1 vote391 views1 answer
Set Custom User Agent react
Javascript React
0 vote396 views1 answer
`ForwardRef(ListboxComponent)`, expected a ReactNode. at ListboxComponent
Javascript React
1 vote362 views1 answer
Type writer in react
Javascript React
0 vote350 views1 answer
Reactjs alert
Javascript React
1 vote372 views1 answer
How to setup React Context, useContext Hook
Javascript React
0 vote365 views1 answer
Scroll to a input on button click react native
Javascript React
1 vote349 views1 answer
React navigation asyncstorage install
Javascript React
0 vote366 views2 answers
How to run react builed version
Javascript React