5ce26eb91a
Co-authored-by: Peter Thatcher <peter@signal.org> Co-authored-by: Jim Gustafson <jim@signal.org> Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
42 lines
1,013 B
TypeScript
42 lines
1,013 B
TypeScript
// Copyright 2022 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import type { CSSProperties, ReactElement } from 'react';
|
|
import React, { useEffect, useRef } from 'react';
|
|
import lottie from '@evanhahn/lottie-web-light';
|
|
|
|
import { lottieNoopAudioFactory } from '../util/lottieNoopAudioFactory';
|
|
|
|
export function Lottie({
|
|
animationData,
|
|
className,
|
|
style,
|
|
}: Readonly<{
|
|
animationData: unknown;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}>): ReactElement {
|
|
const containerRef = useRef<null | HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
if (!container) {
|
|
return;
|
|
}
|
|
|
|
const animationItem = lottie.loadAnimation({
|
|
container,
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
animationData,
|
|
audioFactory: lottieNoopAudioFactory,
|
|
});
|
|
|
|
return () => {
|
|
animationItem.destroy();
|
|
};
|
|
}, [animationData]);
|
|
|
|
return <div className={className} ref={containerRef} style={style} />;
|
|
}
|