/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 vote447 views3 answers
SyntaxError: /mnt/c/myAppFile/hello-rails-react/app/javascript/components/Greeting.js: Support for the experimental syntax 'jsx' isn't currently enabled rails
Javascript React
63 votes353 views6 answers
React router install
Javascript React
14 votes381 views2 answers
Border react native
Javascript React
0 vote392 views1 answer
React redux open another page
Javascript React
0 vote386 views1 answer
Play 2 audio react
Javascript React
0 vote407 views1 answer
Storybook react router
Javascript React
0 vote387 views1 answer
How to pass property component in react enzyme
Javascript React
1 vote410 views1 answer
Disable split screen react native
Javascript React
23 votes381 views3 answers
Copy text to clipboard javascript react
Javascript React
15 votes361 views4 answers
Get query params react
Javascript React