/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

1 vote185 views1 answer
How to find the width of outerconatiner in react native
Javascript React
21 votes125 views3 answers
Map function in react
Javascript React
15 votes133 views2 answers
Ternary react
Javascript React
1 vote127 views1 answer
Change react native app name
Javascript React
0 vote149 views2 answers
Airbnb and eslint react native
Javascript React
0 vote129 views1 answer
React native shadow maker
Javascript React
8 votes133 views1 answer
React.Fragmen
Javascript React
1 vote152 views1 answer
How to delete an object from array in reactjs
Javascript React
0 vote135 views1 answer
Escaping less than great than signs in react
Javascript React
4 votes116 views1 answer
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
Javascript React