react-lottie-hook/dist/index.cjs.d.ts

React Lottie written with react hooks

/// <reference types="react" />
import React from "react";
import { AnimationItem, AnimationSegment, AnimationConfig, AnimationConfigWithData, AnimationConfigWithPath, AnimationDirection, AnimationEventName, AnimationEventCallback } from "lottie-web";
interface LottieProps {
    lottieRef: React.MutableRefObject<HTMLElement | null>;
    width?: number;
    height?: number;
    style?: React.CSSProperties;
    title?: string;
    className?: string;
    ariaRole?: string;
    ariaLabel?: string;
    onKeyDown?: (e: React.KeyboardEvent) => void;
    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}
interface ClickAwayProps {
    mouseEvent?: "onClick";
    touchEvent?: "onTouchEnd";
    onClickAway: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
    onClickIn: () => void;
    style?: React.CSSProperties;
    className?: string;
    children: React.ReactNode;
}
interface LottieAnimationItem extends AnimationItem {
    isPaused: boolean;
    isStopped: boolean;
}
declare enum AnimType {
    svg = 0,
    canvas = 1,
    html = 2
}
type AnimTypes = AnimType.svg | AnimType.canvas | AnimType.html;
type Layer = {
    ddd: number;
    ind: number;
    ty: number;
    nm: string;
    parent?: number;
    ks: {
        [key: string]: any;
    };
    op: number;
    ip: number;
    bm: number;
    ao: number;
    st: number;
    sr: number;
    shapes: any[];
    completed: boolean;
};
interface Asset {
    id: string;
    layers: Layer[];
}
interface UseLottieState {
    animType?: AnimTypes;
    animationID?: string;
    assets?: Asset[];
    assetsPath?: string;
    autoloadSegments?: boolean;
    audioController?: AudioController;
    autoplay?: boolean;
    currentFrame?: number;
    currentRawFrame?: number;
    firstFrame?: number;
    frameModifier?: number;
    frameMult?: number;
    frameRate?: number;
    imagePreloader?: ImagePreloader;
    initialSegment?: number;
    isPaused?: boolean;
    isLoaded?: boolean;
    isSubframeEnabled?: boolean;
    loop?: number | boolean;
    name?: string;
    path?: string;
    playCount?: number;
    playDirection?: AnimationDirection;
    playSpeed?: number;
    segmentPos?: number;
    segments?: number[] | AnimationSegment | AnimationSegment[];
    timeCompleted?: number;
    totalFrames?: number;
    isStopped?: boolean;
}
interface ImagePreloader {
    assetsPath: string;
    images: any[];
    imagesLoadedCb: () => void;
    loadedAssets: number;
    path: string;
    totalImages: number;
    _createImageData: () => void;
    _imageLoaded: () => void;
}
interface AudioController {
    audios: any[];
    audioFactory: () => void | undefined;
    _volume: number;
    _isMuted: boolean;
}
interface AnimationDispatch {
    play(): void;
    stop(): void;
    pause(): void;
    resize(): void;
    destroy(): void;
    setSpeed(speed: number): void;
    setDirection(direction: AnimationDirection): void;
    playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
    selectAnimation: (newAnimation: AnimationConfigWithPath | AnimationConfigWithData) => void;
    goToAndPlay(value: number, isFrame?: boolean): void;
    goToAndStop(value: number, isFrame?: boolean): void;
    setSubframe(useSubFrames: boolean): void;
    getDuration(inFrames?: boolean): number;
    addEventListener?<T = AnimationEventTypes>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
    removeEventListener?<T = AnimationEventTypes>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
}
interface LottieOptions extends AnimationConfigWithData {
    segments: AnimationSegment | AnimationSegment[];
}
declare enum Renderer {
    html = "html",
    svg = "svg",
    canvas = "canvas"
}
type AnimationData = AnimationConfigWithPath | AnimationConfigWithData | Record<string, unknown>;
interface LottieConfig<T extends Renderer = Renderer.svg> extends Omit<AnimationConfig<T>, "container"> {
    title?: string;
    options?: LottieOptions;
    eventListeners?: EventListener;
    direction?: 1 | -1 | number;
    speed?: number;
    segments?: AnimationSegment | AnimationSegment[];
    animationData?: AnimationData;
}
type EventListener<T = any> = {
    complete?: AnimationEventCallback<BMCompleteEvent>;
    destroy?: AnimationEventCallback<BMDestroyEvent>;
    loopComplete?: AnimationEventCallback<BMCompleteLoopEvent>;
    enterFrame?: AnimationEventCallback<BMEnterFrameEvent>;
    segmentStart?: AnimationEventCallback<BMSegmentStartEvent>;
    config_ready?: AnimationEventCallback<T>;
    data_ready?: AnimationEventCallback<T>;
    data_failed?: AnimationEventCallback<T>;
    DOMLoaded?: AnimationEventCallback;
    error?: AnimationEventCallback<T>;
    loaded_images?: AnimationEventCallback<T>;
};
interface LottieState extends UseLottieState {
    animationData: AnimationData;
}
type BMEventType<T = string> = {
    type: T;
};
interface BMCompleteEvent extends BMEventType<"complete"> {
    direction: number;
}
interface BMCompleteLoopEvent extends BMEventType<"loopComplete"> {
    currentLoop: number;
    direction: number;
    totalLoops: boolean;
}
interface BMEnterFrameEvent extends BMEventType<"enterFrame"> {
    currentTime: number;
    direction: number;
    totalTime: boolean;
}
interface BMDestroyEvent extends BMEventType<"destroy"> {
    target: AnimationItem;
}
interface BMSegmentStartEvent extends BMEventType<"BMSegmentStartEvent"> {
    firstFrame: number;
    totalFrames: number;
}
interface BMRenderFrameErrorEvent extends BMEventType<"renderFrameError"> {
    nativeError: Error;
    currentTime: number;
}
interface BMConfigErrorEvent extends BMEventType<"configError"> {
    nativeError: Error;
}
interface BMAnimationConfigErrorEvent extends BMEventType {
    nativeError: Error;
    currentTime: number;
}
type AnimationEventTypes = BMCompleteEvent | BMCompleteLoopEvent | BMEnterFrameEvent | BMDestroyEvent | BMRenderFrameErrorEvent | BMConfigErrorEvent | BMAnimationConfigErrorEvent | any;
type AdditionalProps = {
    name?: string;
    path?: string;
    assets?: any[];
    animType?: string;
    frameModifier?: number;
    initialSegment?: number;
    autoloadSegments: boolean;
};
type AnimationType = (LottieAnimationItem | LottieState) & AdditionalProps;
declare const Lottie: React.FC<LottieProps>;
type UseLottie<T extends Renderer = Renderer.svg> = (config: LottieConfig<T>) => [
    React.MutableRefObject<HTMLDivElement | null>,
    UseLottieState,
    AnimationDispatch
];
declare const useLottie: UseLottie;
declare const ClickAway: React.ForwardRefExoticComponent<ClickAwayProps & React.RefAttributes<unknown>>;
export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, UseLottieState, AnimationDispatch, LottieOptions, Renderer, AnimationData, LottieConfig, EventListener, LottieState, BMCompleteEvent, BMCompleteLoopEvent, BMEnterFrameEvent, BMDestroyEvent, BMSegmentStartEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent, BMAnimationConfigErrorEvent, AnimationEventTypes, AdditionalProps, AnimationType };