lottie-react-component
Version:
Render your lottie animations in React, with full typescript support
34 lines (33 loc) • 1.35 kB
TypeScript
import React from "react";
import type { AnimationItem, AnimationConfigWithData, RendererType } from "lottie-web";
interface LottieEventListener {
eventName: Parameters<AnimationItem["addEventListener"]>[0];
callback: Parameters<AnimationItem["addEventListener"]>[1];
}
interface LottieAnimationControl {
[property: string]: [number, number];
}
declare type ConfigOpts = AnimationConfigWithData<RendererType>;
interface LottieProps {
animationData: AnimationConfigWithData["animationData"];
loop?: boolean;
autoplay?: boolean;
renderer?: ConfigOpts["renderer"];
assetsPath?: ConfigOpts["assetsPath"];
rendererSettings?: ConfigOpts["rendererSettings"];
animationControl?: LottieAnimationControl;
height?: string | number;
width?: string | number;
isStopped?: boolean;
isPaused?: boolean;
speed?: number;
tabIndex?: number;
direction?: 1 | -1;
ariaRole?: string;
ariaLabel?: string;
title?: string;
style?: React.CSSProperties;
eventListeners?: LottieEventListener[];
}
export declare const Lottie: ({ eventListeners, isStopped, isPaused, speed, ariaRole, ariaLabel, title, tabIndex, width, height, style, loop, autoplay, animationControl, direction, assetsPath, animationData, rendererSettings, renderer, }: LottieProps) => JSX.Element;
export default Lottie;