dotLottie React Player API Reference

The DotLottieReact component wraps the core dotLottie web player. After obtaining the player instance via dotLottieRefCallback, you have access to the full core API — properties, methods, and events documented in the JS API Reference.

DotLottieWorkerReact

DotLottieWorkerReact offloads animation rendering to a Web Worker, keeping the main thread free for UI interactions. It accepts the same props as DotLottieReact plus workerId.

import { DotLottieWorkerReact } from '@lottiefiles/dotlottie-react';

function App() {
  return <DotLottieWorkerReact src="animation.lottie" autoplay loop workerId="shared-worker" />;
}

All instance methods accessed via dotLottieRefCallback return Promise values when using DotLottieWorkerReact, since calls are proxied to the worker thread.

setWasmUrl

Configure a custom URL for the WASM renderer binary. Call this before rendering any animations — for example, at the top of your app entry point.

import { setWasmUrl } from '@lottiefiles/dotlottie-react';

setWasmUrl('https://your-cdn.com/dotlottie-player.wasm');

Accessing the Player Instance

Use dotLottieRefCallback to get the underlying DotLottie instance:

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function App() {
  const [dotLottie, setDotLottie] = React.useState(null);

  React.useEffect(() => {
    if (!dotLottie) return;

    const onLoad = () => {
      console.log('Total frames:', dotLottie.totalFrames);
      console.log('Duration:', dotLottie.duration);
    };

    dotLottie.addEventListener('load', onLoad);
    return () => dotLottie.removeEventListener('load', onLoad);
  }, [dotLottie]);

  return <DotLottieReact src="animation.lottie" autoplay loop dotLottieRefCallback={setDotLottie} />;
}

Once you have the instance, you can use all properties, methods, and events from the core player:

• Properties — currentFrame, duration, totalFrames, isPlaying, isPaused, isStopped, isLoaded, loop, speed, mode, segment, manifest, activeAnimationId, activeThemeId, and more. See Properties.

• Methods — play(), pause(), stop(), setFrame(), setSpeed(), setLoop(), setMode(), setSegment(), setMarker(), freeze(), unfreeze(), tween(), load(), loadAnimation(), setTheme(), setLayout(), slot methods, state machine methods, and more. See Methods.

• Events — ready, load, loadError, play, pause, stop, loop, complete, frame, render, freeze, unfreeze, destroy, renderError, plus all state machine events. See Events.

• Types — Layout, RenderConfig, StateMachineConfig, Transform, Marker, slot value types, and event payload interfaces. See Type Definitions.

Related Topics

• Props Reference — Component props

• Examples — Usage examples

• JS API Reference — Full core player API