Next

1. Install using your favorite package manager:

pnpm add @dotlottie/player-component

yarn install @dotlottie/player-component

npm install @dotlottie/player-component

2. Wrapping the component for client-side

For ease of use, it's best to create a component to wrap the dotLottie player for client-side use only.

//dotlottiePlayer.tsx
'use client'

import '@dotlottie/player-component'
import { PlaybackOptions } from '@dotlottie/player-component'

export interface PlayerProps {
  src: string,
  playbackOptions?: PlaybackOptions,
  controls?: boolean
}

export default function Player(props: PlayerProps) {
  return (
    <div>
      <dotlottie-player
        src={props.src}
        autoplay={props.playbackOptions?.autoplay}
        defaultTheme={props.playbackOptions?.defaultTheme}
        direction={props.playbackOptions?.direction}
        hover={props.playbackOptions?.hover}
        intermission={props.playbackOptions?.intermission}
        loop={props.playbackOptions?.loop}
        playMode={props.playbackOptions?.playMode}
        speed={props.playbackOptions?.speed}
        controls={props.controls}>
      </dotlottie-player>
    </div>
  )
}

3. Usage in app

import Player from "./player";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'dotlottie-player': any;
    }
  }
}

export default function Home() {
  return (
    <main>
      <div>
        <Player
          src="[...].lottie"
          controls
        />

// Animation from public asset folder
// Adding playback options will override manifest playback options
        <Player
          src="monster.lottie"
          playbackOptions={{
            direction: 1,
            speed: 1,
            autoplay: true,
            playMode: 'bounce'
          }}
          controls
        />
      </div>
    </main>
  )
}