LottiePlayer

LottiePlayer is a thin wrapper around the lottie-react (opens in a new tab) library. It provides a convenient and easy way to integrate Lottie animations into your React application.

Importing

To use the LottiePlayer component, import it as follows:

import { LottiePlayer } from '@ef-global/backpack/LottiePlayer';

Props

The LottiePlayer component accepts the following props:

Prop	Type	Description
src	string \| LottieJson	Lottie animation source data or URL.
autoplay	boolean	Whether the animation should autoplay. Default is `false`.
loop	boolean \| number	Whether the animation should loop. Default is `false`.
keepLastFrame	boolean	Whether to keep the last frame when the animation is stopped. Default is `false`.
speed	number	Animation playback speed. Default is `1`.
onEvent	(event: LottieEvent) => void \| undefined	Event listener for Lottie animation events.

Usage

Here are some examples of how to use the LottiePlayer component:

Default

<LottiePlayer src={Attention} />

Autoplay

<LottiePlayer src={House} autoplay={true} />

Loop

<LottiePlayer src={AirplaneWindow} autoplay={true} loop={true} />

External Controls

import React, { useRef } from 'react';
import { LottiePlayer } from '@/src/components/LottiePlayer';
import { Button, ButtonGroup } from '@/src/components/Button';
const playerRef = useRef(null);
<LottiePlayer ref={playerRef} src={Bicycle} autoplay={true} loop={true} />
<ButtonGroup align={'center'}>
  <Button as={'button'} onPress={() => playerRef.current.play()}>Play</Button>
  <Button as={'button'} onPress={() => playerRef.current.pause()}>Pause</Button>
  <Button as={'button'} onPress={() => playerRef.current.stop()}>Stop</Button>
</ButtonGroup>

Keep Last Frame

<LottiePlayer src={Bookshelf} autoplay={true} keepLastFrame={true} />

Set Speed

<LottiePlayer src={Bus} autoplay={true} loop={true} speed={2} />

Log Events

<LottiePlayer
  src={Backpacker}
  autoplay={true}
  loop={true}
  onEvent={(event) => {
    if (event !== 'frame') console.log(event);
  }}
/>

List Modal