### Install react-lottie-player

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Install the package using npm.

```bash
npm install --save react-lottie-player
```

--------------------------------

### Imperative API Usage with useRef

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Accesses the Lottie player's imperative API using a ref to control playback or get frame information.

```jsx
const lottieRef = useRef();

useEffect(() => {
  console.log(lottieRef.current.currentFrame);
}, [])

return <Lottie ref={lottieRef} />;
```

--------------------------------

### Using LottiePlayerLight

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Imports the LottiePlayerLight version to avoid using 'eval' for animation loading.

```jsx
import Lottie from 'react-lottie-player/dist/LottiePlayerLight'
```

--------------------------------

### Configure Renderer with `rendererSettings`

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Pass renderer-specific options to lottie-web via `rendererSettings`. Use `preserveAspectRatio: 'xMidYMid slice'` for cover behavior, similar to CSS `object-fit: cover`.

```jsx
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function CoverAnimation() {
  return (
    <Lottie
      animationData={animationData}
      play
      loop
      rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
      style={{ width: '100%', height: 300 }}
    />
  );
}
```

--------------------------------

### Select Renderer with `renderer`

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Choose the lottie-web renderer using the `renderer` prop. Options include `'svg'` (default), `'canvas'`, or `'html'`. Changing this prop re-initializes the animation.

```jsx
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function CanvasRenderer() {
  return (
    <Lottie
      animationData={animationData}
      play
      loop
      renderer="canvas"
      style={{ width: 300, height: 300 }}
    />
  );
}
```

--------------------------------

### Use CSP-Safe LottiePlayerLight Build

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Import LottiePlayerLight from 'react-lottie-player/dist/LottiePlayerLight' for environments with strict Content Security Policies. This build omits expression support (which requires eval) and is smaller.

```jsx
import React from 'react';
// Use the light build — no eval, smaller bundle, CSP-safe
import LottieLight from 'react-lottie-player/dist/LottiePlayerLight';
import animationData from './simple-animation.json'; // must not use expressions

export default function CspSafeAnimation() {
  return (
    <LottieLight
      animationData={animationData}
      play
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}
```

--------------------------------

### Setting Resize Mode to Cover

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Configures the Lottie animation to fill its container using the 'rendererSettings' prop with 'preserveAspectRatio'.

```jsx
<Lottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} />
```

--------------------------------

### Basic Usage of Lottie Player

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Import and use the Lottie component with animation data and playback controls. Supports loop and custom styles.

```jsx
import React from 'react'

import Lottie from 'react-lottie-player'
// Alternatively:
// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'

import lottieJson from './my-lottie.json'

export default function Example() {
  return (
    <Lottie
      loop
      animationData={lottieJson}
      play
      style={{ width: 150, height: 150 }}
    />
  )
}
```

--------------------------------

### Loading Lottie Animation from a URL

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Loads a Lottie animation directly from a specified URL using the 'path' prop.

```jsx
const Example = () => <Lottie path="https://example.com/lottie.json" />;
```

--------------------------------

### Basic Lottie Animation with react-lottie-player

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Renders a basic Lottie animation using the LottiePlayer component. Ensure you have a local animation JSON file and import it.

```jsx
import React from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function BasicAnimation() {
  return (
    <Lottie
      animationData={animationData}
      play
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}
```

--------------------------------

### play Prop

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Control animation playback declaratively using the `play` prop. Set to `true` to play and `false` to pause. Changes are applied instantly.

```APIDOC
## play Prop

### Description
A boolean that controls playback. `true` plays the animation; `false` pauses it. Changing this prop at any time correctly starts or stops playback, including when combined with `segments` or `direction`.

### Usage
```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function PlayPauseControl() {
  const [playing, setPlaying] = useState(false);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play={playing}
        loop
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => setPlaying((p) => !p)}>
        {playing ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}
```
```

--------------------------------

### Configure Lottie Animation Looping

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Control animation looping with the loop prop. Accepts true for infinite looping, false to play once, or a positive integer for a specific number of loops.

```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function LoopControl() {
  // Play exactly 3 times, then stop
  return (
    <Lottie
      animationData={animationData}
      play
      loop={3}
      style={{ width: 200, height: 200 }}
    />
  );
}
```

--------------------------------

### Handle Lottie Animation Events with Callbacks

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Use event callback props like onLoad, onComplete, onLoopComplete, onSegmentStart, and onEnterFrame to react to animation lifecycle events. Ensure proper cleanup to prevent memory leaks.

```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function EventCallbacks() {
  const [events, setEvents] = useState([]);
  const log = (name) => setEvents((prev) => [...prev.slice(-9), name]);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play
        loop={2}
        style={{ width: 200, height: 200 }}
        onLoad={() => log('load')}
        onComplete={() => log('complete')}
        onLoopComplete={() => log('loopComplete')}
        onSegmentStart={() => log('segmentStart')}
        onEnterFrame={() => { /* fires every frame — use sparingly */ }}
      />
      <ul>
        {events.map((e, i) => <li key={i}>{e}</li>)}
      </ul>
    </div>
  );
}
```

--------------------------------

### Load Lottie Animation from Remote URL

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Load animation JSON from a remote URL using the path prop. This is mutually exclusive with the animationData prop. Ensure the URL points to a valid Lottie JSON file.

```jsx
import Lottie from 'react-lottie-player';

export default function RemoteAnimation() {
  return (
    <Lottie
      path="https://assets10.lottiefiles.com/packages/lf20_myejiggj.json"
      play
      loop
      style={{ width: 250, height: 250 }}
    />
  );
}
```

--------------------------------

### Lazy Loading Lottie Animation with Dynamic Import

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Loads Lottie animation data dynamically using useEffect and import, displaying a loading state until data is available.

```jsx
const Example = () => {
  const [animationData, setAnimationData] = useState<object>();

  useEffect(() => {
    import('./animation.json').then(setAnimationData);
  }, []);

  if (!animationData) return <div>Loading...</div>;
  return <Lottie animationData={animationData} />;
}
```

--------------------------------

### Lazy Loading Lottie Animation with React.lazy

Source: https://github.com/mifi/react-lottie-player/blob/master/README.md

Demonstrates how to lazy load a Lottie animation component using React.lazy for code splitting.

```jsx
// MyLottieAnimation.jsx

import Lottie from 'react-lottie-player';
import animation from './animation.json';

export default function MyLottieAnimation(props) {
  return <Lottie animationData={animation} {...props} />;
}

// MyComponent.jsx

import React from 'react';
const MyLottieAnimation = React.lazy(() => import('./MyLottieAnimation'));

export default function MyComponent() {
  return <MyLottieAnimation play />;
}
```

--------------------------------

### loop Prop

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Configure animation looping behavior with the `loop` prop. It accepts `true` for infinite loops, `false` to play once, or a positive integer for a specific number of loops.

```APIDOC
## loop Prop

### Description
Controls whether the animation loops. Accepts `true` (loop indefinitely), `false` (play once), or a positive integer (loop exactly N times).

### Usage
```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function LoopControl() {
  // Play exactly 3 times, then stop
  return (
    <Lottie
      animationData={animationData}
      play
      loop={3}
      style={{ width: 200, height: 200 }}
    />
  );
}
```
```

--------------------------------

### Seek to Specific Frames with `goTo`

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Use the `goTo` prop to seek the animation to a specific frame. Combine with `play={true}` for `goToAndPlay` or `play={false}` for `goToAndStop`. Ideal for scroll-driven or slider-controlled animations.

```jsx
import React, { useState, useEffect, useRef } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function ScrollDrivenAnimation() {
  const [frame, setFrame] = useState(0);
  const containerRef = useRef(null);

  useEffect(() => {
    const el = containerRef.current;
    const handleScroll = (e) => {
      // Map scroll position to animation frame (0–100)
      setFrame(Math.min(100, Math.floor(e.target.scrollTop * 0.5)));
    };
    el.addEventListener('scroll', handleScroll, { passive: true });
    return () => el.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div ref={containerRef} style={{ height: 400, overflowY: 'scroll' }}>
      <div style={{ height: 600, paddingTop: 100 }}>
        <Lottie
          animationData={animationData}
          goTo={frame}
          play={false}
          style={{ width: 200, height: 200 }}
        />
        <p>Frame: {frame}</p>
      </div>
    </div>
  );
}
```

--------------------------------

### path Prop

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Load animation JSON from a remote URL by providing a URL string to the `path` prop. This prop is mutually exclusive with `animationData`.

```APIDOC
## path Prop

### Description
Provide a URL string to load animation JSON from a remote source. Mutually exclusive with `animationData`; use one or the other.

### Usage
```jsx
import Lottie from 'react-lottie-player';

export default function RemoteAnimation() {
  return (
    <Lottie
      path="https://assets10.lottiefiles.com/packages/lf20_myejiggj.json"
      play
      loop
      style={{ width: 250, height: 250 }}
    />
  );
}
```
```

--------------------------------

### Dynamically Load Animation Data with State and import()

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Defer loading of animation JSON data at runtime using dynamic import() and React state. This is useful for triggering loads based on user interaction or after the page is interactive, further optimizing initial load.

```jsx
import React, { useState, useEffect } from 'react';
import Lottie from 'react-lottie-player';

export default function LazyAnimationData() {
  const [animationData, setAnimationData] = useState(null);

  useEffect(() => {
    // Delay load until after initial paint
    const timer = setTimeout(() => {
      import('./animation.json').then((data) => setAnimationData(data));
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  if (!animationData) return <div>Loading...</div>;

  return (
    <Lottie
      animationData={animationData}
      play
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}
```

--------------------------------

### Lazy Load Lottie Component with React.lazy

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Implement code splitting for the Lottie component by using React.lazy and dynamic imports. This prevents the Lottie component from blocking the initial bundle, improving load times.

```jsx
// LottieAnimation.jsx — isolated component for code splitting
import Lottie from 'react-lottie-player';
import animation from './animation.json';

export default function LottieAnimation(props) {
  return <Lottie animationData={animation} {...props} />;
}

// MyPage.jsx — lazy-load the animation
import React, { Suspense, lazy } from 'react';
const LottieAnimation = lazy(() => import('./LottieAnimation'));

export default function MyPage() {
  return (
    <Suspense fallback={<div>Loading animation...</div>}>
      <LottieAnimation play loop style={{ width: 200, height: 200 }} />
    </Suspense>
  );
}
```

--------------------------------

### Access Lottie AnimationItem Instance via Ref

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Forward a ref to the Lottie component to gain imperative access to the underlying lottie-web AnimationItem instance. Use this for direct control over properties like currentFrame or methods like getDuration(). Prefer declarative props when possible.

```jsx
import React, { useRef, useEffect } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function ImperativeRef() {
  const lottieRef = useRef();

  useEffect(() => {
    // Access AnimationItem instance after mount
    if (lottieRef.current) {
      console.log('Total frames:', lottieRef.current.getDuration(true));
      console.log('Duration (s):', lottieRef.current.getDuration(false));
    }
  }, []);

  return (
    <Lottie
      ref={lottieRef}
      animationData={animationData}
      play
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}
```

--------------------------------

### speed Prop

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Adjust the animation playback speed using the `speed` prop, which acts as a multiplier. `1` is normal speed, `2` is double, `0.5` is half. Changes are applied instantly.

```APIDOC
## speed Prop

### Description
A number controlling the playback speed multiplier. `1` is normal speed, `2` is double speed, `0.5` is half speed. Accepts any positive number; changes are applied instantly without re-initializing the animation.

### Usage
```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function SpeedControl() {
  const [speed, setSpeed] = useState(1);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play
        loop
        speed={speed}
        style={{ width: 200, height: 200 }}
      />
      <input
        type="range" min="0.1" max="3" step="0.1"
        value={speed}
        onChange={(e) => setSpeed(Number(e.target.value))}
      />
      <span>Speed: {speed}x</span>
    </div>
  );
}
```
```

--------------------------------

### Lottie Player Component

Source: https://context7.com/mifi/react-lottie-player/llms.txt

The primary LottiePlayer component. Import from 'react-lottie-player'. It renders a div and manages the animation lifecycle. Standard HTML div props are forwarded to the container.

```APIDOC
## Lottie Player Component

### Description
The primary LottiePlayer component. Import from `react-lottie-player`. It renders a `<div>` container and manages the full lifecycle of a Lottie animation. All standard HTML `<div>` props (e.g. `style`, `className`, `id`) are forwarded to the container element.

### Props
- **animationData** (object) - Required - Inline Lottie JSON object.
- **path** (string) - Required - Remote URL to load Lottie JSON from. Mutually exclusive with `animationData`.
- **play** (boolean) - Controls playback. `true` plays, `false` pauses.
- **loop** (boolean | number) - Controls looping. `true` loops indefinitely, `false` plays once, a positive integer loops N times.
- **speed** (number) - Controls playback speed multiplier. `1` is normal speed.
```

--------------------------------

### Control Lottie Animation Playback State

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Use the play prop (boolean) to declaratively control animation playback. Set to true to play, false to pause. This works correctly with segments and direction changes.

```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function PlayPauseControl() {
  const [playing, setPlaying] = useState(false);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play={playing}
        loop
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => setPlaying((p) => !p)}>
        {playing ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}
```

--------------------------------

### Control Animation Playback Direction with `direction`

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Use the `direction` prop to play animations forwards (1) or in reverse (-1). Setting to -1 correctly handles seeking to the last frame before reverse playback.

```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function ReverseAnimation() {
  const [direction, setDirection] = useState(1);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play
        loop
        direction={direction}
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => setDirection((d) => (d === 1 ? -1 : 1))}>
        Toggle Direction (currently: {direction === 1 ? 'Forward' : 'Reverse'})
      </button>
    </div>
  );
}
```

--------------------------------

### animationData Prop

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Pass a Lottie JSON object directly using the `animationData` prop. The component deep-clones the data to prevent memory leaks and handles default ES module imports of JSON files.

```APIDOC
## animationData Prop

### Description
Pass a Lottie JSON object directly as `animationData`. The component deep-clones the data internally to prevent the [lottie-web memory leak with repeaters](https://github.com/mifi/react-lottie-player/issues/35). Also handles the `{ default: ... }` shape produced by default ES module imports of JSON files.

### Usage
```jsx
import Lottie from 'react-lottie-player';
import animationData from './my-animation.json';

export default function InlineDataExample() {
  return (
    <Lottie
      animationData={animationData}
      play
      loop={false}
      style={{ width: 300, height: 300 }}
    />
  );
}
```
```

--------------------------------

### Load Lottie Animation from Inline JSON Data

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Pass Lottie JSON data directly to the animationData prop. This method handles both direct JSON objects and default ES module imports of JSON files. The component deep-clones the data to prevent memory leaks.

```jsx
import Lottie from 'react-lottie-player';
import animationData from './my-animation.json';

// Works with both direct JSON objects and ES module default-imported JSON
export default function InlineDataExample() {
  return (
    <Lottie
      animationData={animationData}
      play
      loop={false}
      style={{ width: 300, height: 300 }}
    />
  );
}
```

--------------------------------

### Adjust Lottie Animation Playback Speed

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Modify the playback speed using the speed prop, which accepts a positive number multiplier. Changes are applied instantly without re-initializing the animation.

```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function SpeedControl() {
  const [speed, setSpeed] = useState(1);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play
        loop
        speed={speed}
        style={{ width: 200, height: 200 }}
      />
      <input
        type="range" min="0.1" max="3" step="0.1"
        value={speed}
        onChange={(e) => setSpeed(Number(e.target.value))}
      />
      <span>Speed: {speed}x</span>
    </div>
  );
}
```

--------------------------------

### Play Specific Frame Ranges with `segments`

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Restrict animation playback to a specific frame range using the `segments` prop. It accepts a single segment `[startFrame, endFrame]` or an array of segments.

```jsx
import React, { useState } from 'react';
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function SegmentedPlayback() {
  // Only play frames 10 through 60
  const [segments, setSegments] = useState([10, 60]);

  return (
    <div>
      <Lottie
        animationData={animationData}
        play
        loop
        segments={segments}
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => setSegments([10, 60])}>Segment A (10–60)</button>
      <button onClick={() => setSegments([70, 120])}>Segment B (70–120)</button>
    </div>
  );
}
```

--------------------------------

### Disable Subframe Rendering with `useSubframes`

Source: https://context7.com/mifi/react-lottie-player/llms.txt

Set `useSubframes` to `false` to disable intermediate subframe rendering and snap animations to whole frame numbers. This is useful for syncing animations to discrete states.

```jsx
import Lottie from 'react-lottie-player';
import animationData from './animation.json';

export default function WholeFramesOnly() {
  return (
    <Lottie
      animationData={animationData}
      play
      loop
      useSubframes={false}
      style={{ width: 200, height: 200 }}
    />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.