28 lines
711 B
TypeScript
28 lines
711 B
TypeScript
import lottie from 'lottie-web';
|
|
import React, { useEffect, useRef } from 'react';
|
|
|
|
interface LottieProps {
|
|
animationData: any
|
|
width: number
|
|
height: number
|
|
}
|
|
|
|
/** Wrapper around lottie-web */
|
|
// https://github.com/chenqingspring/react-lottie/issues/139
|
|
const Lottie: React.FC<LottieProps> = ({ animationData, width, height }) => {
|
|
const element = useRef<HTMLDivElement>(null);
|
|
const lottieInstance = useRef<any>();
|
|
|
|
useEffect(() => {
|
|
if (element.current) {
|
|
lottieInstance.current = lottie.loadAnimation({
|
|
animationData,
|
|
container: element.current,
|
|
});
|
|
}
|
|
}, [animationData]);
|
|
|
|
return <div style={{ width, height }} ref={element} />;
|
|
};
|
|
|
|
export default Lottie;
|