/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 vote140 views1 answer
React roter dom npm
Javascript React
3 votes138 views1 answer
React hooks send data from child to parent
Javascript React
1 vote117 views1 answer
Statusbar reactnati
Javascript React
0 vote138 views1 answer
Timezone in react js
Javascript React
0 vote118 views1 answer
Get started with datagrid in react js
Javascript React
23 votes136 views2 answers
Create-react-app npm yarn
Javascript React
23 votes124 views4 answers
Change port react app
Javascript React
0 vote135 views1 answer
React Update a label when rate moves
Javascript React
1 vote125 views1 answer
React native get mac address
Javascript React
1 vote120 views1 answer
Remove underline from hyperlink react
Javascript React