### Integrating Lottie Animations with useLottie Hook in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottie/README.mdx

This example demonstrates the fundamental setup for using the `useLottie` hook. It imports an animation JSON, defines basic Lottie options (loop, autoplay), and applies a CSS style. The `View` component returned by the hook is then rendered to display the animation.

```jsx
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const style = {
  height: 300,
};

const Example = () => {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true,
    autoplay: true,
  };

  const { View } = useLottie(options, style);

  return View;
};

export default Example;
```

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

### Install lottie-react Package

Source: https://github.com/gamote/lottie-react/blob/main/README.md

Instructions for installing the lottie-react package using popular package managers. This library uses React Hooks, so React and React DOM v16.8.0 or higher are required peer dependencies.

```shell
yarn add lottie-react
```

```shell
npm i lottie-react
```

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

### Calling Lottie Interaction Methods

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

Provides an example of how to invoke an interaction method, specifically `pause()`, on the Lottie animation instance obtained through the `lottieRef`.

```jsx
...
lottieRef.current.pause();
...
```

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

### Render Lottie Animation with React Component

Source: https://github.com/gamote/lottie-react/blob/main/README.md

Example demonstrating how to integrate Lottie animations into a React application using the Lottie component. It imports an animation data JSON file and renders it with basic looping enabled.

```tsx
import React from "react";
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;

export default App;
```

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

### Sync Lottie Animation with Cursor Diagonal Movement in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

This example demonstrates syncing a Lottie animation's progress with the diagonal movement of the cursor within its container. Moving the cursor from the top-left to the bottom-right completes the animation.

```jsx
import { useLottie, useLottieInteractivity } from "lottie-react";
import robotAnimation from "./robotAnimation.json";

const style = {
  height: 300,
  border: 3,
  borderStyle: "solid",
  borderRadius: 7,
};

const options = {
  animationData: robotAnimation,
};

const CursorDiagonalSync = () => {
  const lottieObj = useLottie(options, style);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "cursor",
    actions: [
      {
        position: { x: [0, 1], y: [0, 1] },
        type: "seek",
        frames: [0, 180],
      },
    ],
  });

  return Animation;
};

export default CursorDiagonalSync;
```

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

### Lottie Scroll with Offset in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

This example demonstrates how to control a Lottie animation based on scroll position. The animation is stopped for the first 45% of the container's scroll and then synced with the scroll for the remaining 55%.

```jsx
import { useLottie, useLottieInteractivity } from "lottie-react";
import likeButton from "./likeButton.json";

const options = {
  animationData: likeButton,
};

const Example = () => {
  const lottieObj = useLottie(options);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "scroll",
    actions: [
      {
        visibility: [0, 0.45],
        type: "stop",
        frames: [0],
      },
      {
        visibility: [0.45, 1],
        type: "seek",
        frames: [0, 38],
      },
    ],
  });

  return Animation;
};

export default Example;
```

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

### Play Lottie Segments on Hover in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

This example illustrates how to play a specific segment of a Lottie animation (frames 45 to 60) when the cursor hovers over the component. The animation stops at frame 45 when the cursor leaves the container.

```jsx
import { useLottie, useLottieInteractivity } from "lottie-react";
import robotAnimation from "./robotAnimation.json";

const style = {
  height: 300,
  border: 3,
  borderStyle: "solid",
  borderRadius: 7,
};

const options = {
  animationData: robotAnimation,
};

const PlaySegmentsOnHover = () => {
  const lottieObj = useLottie(options, style);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "cursor",
    actions: [
      {
        position: { x: [0, 1], y: [0, 1] },
        type: "loop",
        frames: [45, 60],
      },
      {
        position: { x: -1, y: -1 },
        type: "stop",
        frames: [45],
      },
    ],
  });

  return Animation;
};

export default PlaySegmentsOnHover;
```

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

### Lottie Scroll Effect with Offset and Segment Looping in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

This example shows how to implement a Lottie animation that stops, seeks to a specific frame, and then loops a segment of the animation based on scroll visibility. Specifically, it loops frames 45 to 60 once 45% of the container is reached.

```jsx
import { useLottie, useLottieInteractivity } from "lottie-react";
import robotAnimation from "./robotAnimation.json";

const options = {
  animationData: robotAnimation,
};

const Example = () => {
  const lottieObj = useLottie(options);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "scroll",
    actions: [
      {
        visibility: [0, 0.2],
        type: "stop",
        frames: [0],
      },
      {
        visibility: [0.2, 0.45],
        type: "seek",
        frames: [0, 45],
      },
      {
        visibility: [0.45, 1.0],
        type: "loop",
        frames: [45, 60],
      },
    ],
  });

  return Animation;
};

export default Example;
```

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

### Control Lottie Animation with Scroll Interactivity in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

This example shows how to integrate scroll-based interactivity with a Lottie animation using the `lottie-react` component. It defines an `interactivity` object with `mode: "scroll"` and an array of `actions`. Each action specifies a `visibility` range, a `type` (e.g., 'stop', 'seek', 'loop'), and `frames` to control the animation playback based on the element's visibility within the viewport. The `Lottie` component then receives this `interactivity` object as a prop.

```jsx
import Lottie from "lottie-react";
import robotAnimation from "./robotAnimation.json";

const style = {
  height: 300,
};

const interactivity = {
  mode: "scroll",
  actions: [
    {
      visibility: [0, 0.2],
      type: "stop",
      frames: [0],
    },
    {
      visibility: [0.2, 0.45],
      type: "seek",
      frames: [0, 45],
    },
    {
      visibility: [0.45, 1.0],
      type: "loop",
      frames: [45, 60],
    },
  ],
};

const Example = () => {
  return (
    <Lottie
      animationData={robotAnimation}
      style={style}
      interactivity={interactivity}
    />
  );
};

export default Example;
```

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

### Sync Lottie Animation with Cursor Horizontal Movement in React

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

This example shows how to synchronize a Lottie animation's progress with the horizontal movement of the cursor. The `x` and `y` arrays in the position object can be interchanged to achieve vertical syncing.

```jsx
import { useLottie, useLottieInteractivity } from "lottie-react";
import hamsterAnimation from "./hamsterAnimation.json";

const style = {
  height: 300,
  border: 3,
  borderStyle: "solid",
  borderRadius: 7,
};

const options = {
  animationData: hamsterAnimation,
};

const CursorHorizontalSync = () => {
  const lottieObj = useLottie(options, style);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "cursor",
    actions: [
      {
        position: { x: [0, 1], y: [-1, 2] },
        type: "seek",
        frames: [0, 179],
      },
      {
        position: { x: -1, y: -1 },
        type: "stop",
        frames: [0],
      },
    ],
  });

  return Animation;
};

export default CursorHorizontalSync;
```

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

### useLottie Hook API Reference: Parameters and Returns

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottie/README.mdx

Comprehensive API documentation for the `useLottie` hook, detailing all configurable parameters for animation behavior and styling, as well as the methods and properties returned for programmatic control over the Lottie animation instance.

```APIDOC
useLottie(options: Object, style: Object)

Parameters:
  options: Object (required)
    Subset of the lottie-web options.
    options.animationData: Object (required)
      A JSON Object with the exported animation data.
    options.loop: boolean|number (optional, default: true)
      Set it to true for infinite amount of loops, or pass a number to specify how many times should the last segment played be looped.
    options.autoplay: boolean (optional, default: true)
      If set to true, animation will play as soon as it's loaded.
    options.initialSegment: array (optional)
      Expects an array of length 2. First value is the initial frame, second value is the final frame. If this is set, the animation will start at this position in time instead of the exported value from AE.
  style: Object (optional)
    Style object that applies to the animation wrapper (which is a `div`).

Returns:
  Lottie: Object
    Lottie.View: React.Element
    Lottie.play: method
    Lottie.stop: method
    Lottie.pause: method
    Lottie.setSpeed: method
    Lottie.goToAndStop: method
    Lottie.goToAndPlay: method
    Lottie.setDirection: method
    Lottie.playSegments: method
    Lottie.setSubframe: method
    Lottie.getDuration: method
    Lottie.destroy: method
```

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

### useLottieInteractivity Hook Parameters Reference

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

Detailed reference for the parameters accepted by the `useLottieInteractivity` hook, including `lottieObj`, `mode`, and the `actions` array.

```APIDOC
useLottieInteractivity(params: object):
  lottieObj: object (required)
    Description: Result returned from the useLottie() hook
  mode: string (required)
    Description: Either "scroll" or "cursor". Event that will be synced with animation
  actions: array (required)
    Description: Array of actions that will run in sequence (SEE BELOW)
```

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

### Basic Lottie Component Usage

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

Demonstrates how to import the Lottie component and an animation data JSON, then render a basic Lottie animation within a React functional component.

```jsx
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const Example = () => {
  return <Lottie animationData={groovyWalkAnimation} />;
};

export default Example;
```

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

### Lottie-react Code Coverage Report

Source: https://github.com/gamote/lottie-react/blob/main/README.md

A summary of the test coverage for the lottie-react project, indicating 100% coverage across statements, branches, functions, and lines for all components and hooks, ensuring high code quality.

```text
-----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------
```

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

### Lottie Interaction Methods

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

Details the methods available through the `lottieRef` prop for programmatic control over the Lottie animation, such as playback, speed, and segment control.

```APIDOC
Lottie Interaction Methods:
  play():
    Description: Plays the animation.
  stop():
    Description: Stops the animation.
  pause():
    Description: Pauses the animation.
  setSpeed(speed):
    Description: Sets the playback speed.
    Parameters:
      speed:
        Type: Number
        Description: 1 is normal speed.
  goToAndPlay(value, isFrame):
    Description: Jumps to a specific point and plays from there.
    Parameters:
      value:
        Type: Number
        Description: Numeric value.
      isFrame:
        Type: Boolean
        Description: Defines if first argument is a time based value or a frame based (default false).
  goToAndStop(value, isFrame):
    Description: Jumps to a specific point and stops there.
    Parameters:
      value:
        Type: Number
        Description: Numeric value.
      isFrame:
        Type: Boolean
        Description: Defines if first argument is a time based value or a frame based (default false).
  setDirection(direction):
    Description: Sets the animation playback direction.
    Parameters:
      direction:
        Type: Number
        Description: 1 is forward, -1 is reverse.
  playSegments(segments, forceFlag):
    Description: Plays specific segments of the animation.
    Parameters:
      segments:
        Type: Array
        Description: Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
      forceFlag:
        Type: Boolean
        Description: If set to false, it will wait until the current segment is complete. If true, it will update values immediately.
  setSubframe(useSubFrames):
    Description: Controls subframe rendering for smoother animation.
    Parameters:
      useSubFrames:
        Type: Boolean
        Description: If false, it will respect the original AE fps. If true, it will update on every requestAnimationFrame with intermediate values. Default is true.
  getDuration(inFrames):
    Description: Returns the animation duration.
    Parameters:
      inFrames:
        Type: Boolean
        Description: If true, returns duration in frames, if false, in seconds.
  destroy():
    Description: Destroys the animation instance.
```

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

### Render Lottie Animation with React Hook (useLottie)

Source: https://github.com/gamote/lottie-react/blob/main/README.md

Illustrates how to use the useLottie hook for more granular control over Lottie animations in React. It defines options for the animation data and looping, then destructures the View component from the hook's return value for rendering.

```tsx
import React from "react";
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const App = () => {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true
  };

  const { View } = useLottie(options);

  return <>{View}</>;
};

export default App;
```

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

### Lottie Interactivity Action Object Definition

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

Defines the structure and properties of an individual action object used within the `actions` array for `useLottieInteractivity`, covering `frames`, `type`, `visibility`, and `position`.

```APIDOC
ActionObject:
  frames: [number] | [number, number]
    Description: Animation frame range to play for the action.
    Example: To sync all 150 frames with one action, you would pass [0, 150].
    Example: To start animation from 50 frame and end at 120, you would pass [50, 120].
    Example: To freeze animation at 80 frame, you would pass [80].
  type: "seek" | "play" | "stop" | "loop"
    Description: Action type. 'play', 'stop', 'loop' are pretty self-explanatory. With 'seek' passed, lottie will play animation frame by frame as you scroll down the page (mode: "scroll") or move cursor around (mode: "cursor").
  visibility?: [number, number] (mode "scroll" only)
    Description: Viewport of the action. Each action has a start and end which is essentially a percentage for the height of the lottie container and is a value between 0 and 1.
    Example: To start the action when animation is visible on the page, you would pass [0, 1].
    Example: To start lottie after 40% scrolled and end at 85% scrolled, you would pass [0.4, 0.85].
  position?: { [axis in \"x\" | \"y\"]: number | [number, number] } (mode "cursor" only)
    Description: Cursor viewport. You can define how much of the viewport cursor movement will cover inside the animation element.
    Example: To set cursor cover the entire animation element, you would pass { x: [0, 1], y: [0, 1]}.
    Example: To set cursor outside of the element, you would pass { x: -1, y: -1 }.
```

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

### Lottie Component Props

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

Defines the configurable properties for the Lottie React component, including animation data, playback controls, event handlers, and styling options.

```APIDOC
Lottie Component Props:
  animationData:
    Type: Object
    Default: none
    Required: true
    Description: A JSON Object with the exported animation data.
  loop:
    Type: Boolean | Number
    Default: true
    Required: false
    Description: Set to true for infinite loops, or a number to specify how many times the last segment should be looped.
  autoplay:
    Type: Boolean
    Default: true
    Required: false
    Description: If set to true, animation will play as soon as it's loaded.
  initialSegment:
    Type: Array
    Default: none
    Required: false
    Description: An array of length 2. First value is the initial frame, second value is the final frame. If set, animation starts at this position. Gotcha: Requires a stable array to prevent re-runs.
  onComplete:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when the animation completes.
  onLoopComplete:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when a loop completes.
  onEnterFrame:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered on every frame update.
  onSegmentStart:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when a new segment starts.
  onConfigReady:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when the animation configuration is ready.
  onDataReady:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when animation data is ready.
  onDataFailed:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered if animation data loading fails.
  onLoadedImages:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when all images are loaded.
  onDOMLoaded:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when the DOM is loaded.
  onDestroy:
    Type: Function
    Default: none
    Required: false
    Description: Callback function triggered when the animation instance is destroyed.
  style:
    Type: Object
    Default: none
    Required: false
    Description: Style object that applies to the animation wrapper (which is a div).
  lottieRef:
    Type: React.RefObject
    Default: none
    Required: false
    Description: A React ref object in which interaction methods will be stored.
  interactivity:
    Type: Object
    Default: none
    Required: false
    Description: Interactivity params to sync animation with either scroll or cursor.
  React.HTMLProps<HTMLDivElement>:
    Type: Object
    Default: none
    Required: false
    Description: Alongside the props listed above, the <Lottie/> component also extends React.HTMLProps<HTMLDivElement>. This allows you to pass props to the container <div> element.
```

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

### Accessing Lottie Interaction Methods via Ref

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

Shows how to create a React ref object using `useRef` and pass it to the `lottieRef` prop of the Lottie component. This ref will store the interaction methods for programmatic control.

```jsx
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const Example = () => {
  const lottieRef = useRef();

  return <Lottie lottieRef={lottieRef} animationData={groovyWalkAnimation} />;
};
```

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

### useLottieInteractivity Hook Return Value

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

Describes the value returned by the `useLottieInteractivity` hook, which is a React element ready for rendering.

```APIDOC
Returns: React.Element
  Description: You only need to render the returned value.
```

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

### Lottie Component with HTML Props

Source: https://github.com/gamote/lottie-react/blob/main/docs/components/Lottie/README.mdx

Illustrates how to pass standard HTML attributes, such as `aria-labelledby`, directly to the Lottie component's underlying `div` container, as the component extends `React.HTMLProps<HTMLDivElement>`.

```jsx
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const Example = () =>
  <Lottie
    animationData={groovyWalkAnimation}
    aria-aria-labelledby="use lottie animation"
  />
};
```

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

### Basic Lottie Interactivity with Scroll Mode

Source: https://github.com/gamote/lottie-react/blob/main/docs/hooks/useLottieInteractivity/README.mdx

Demonstrates how to use the `useLottieInteractivity` hook in a React component to control a Lottie animation based on scroll visibility. It configures the animation to seek frames 0 to 38 when the component is 40% to 90% visible in the viewport.

```jsx
import { useLottie, useLottieInteractivity } from "lottie-react";
import likeButton from "./likeButton.json";

const style = {
  height: 300,
  border: 3,
  borderStyle: "solid",
  borderRadius: 7,
};

const options = {
  animationData: likeButton,
};

const Example = () => {
  const lottieObj = useLottie(options, style);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "scroll",
    actions: [
      {
        visibility: [0.4, 0.9],
        type: "seek",
        frames: [0, 38],
      },
    ],
  });

  return Animation;
};

export default Example;
```

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