/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

40 votes166 views4 answers
What does useref do react
Javascript React
4 votes143 views1 answer
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
Javascript React
1 vote164 views1 answer
React-redux imports
Javascript React
2 votes162 views2 answers
Splice state react
Javascript React
0 vote149 views1 answer
Build function component react
Javascript React
0 vote163 views1 answer
React route send informaion in url
Javascript React
21 votes159 views6 answers
React native apk build
Javascript React
5 votes146 views2 answers
Get url query in react
Javascript React
0 vote206 views1 answer
CocoaPods could not find compatible versions for pod "React/Core": In Podfile: react-native-fetch-blob (from `../node_modules/react-native-fetch-blob`) was resolved to 0.10.6, which depends on React/Cor
Javascript React
0 vote182 views2 answers
Go back to screen with params react native
Javascript React