lottie-animation v1.1.1

LottieAnimation for React

LottieAnimation is a lightweight and straightforward React component for adding beautiful animations using Lottie files in your web project.

Features

• Simple Integration: Easily embed Lottie animations.
• Control Playback: Configurable loop and autoplay options.
• Event Handling: Execute a callback function when the animation completes.
• Styling: Apply custom styles and class names.
• Clean Up: Automatic cleanup of animations to prevent memory leaks.

Installation

Install the package via npm:

npm install lottie-animation

or with yarn:

yarn add lottie-animation

Make sure you have react and prop-types installed in your project as they are peer dependencies of this component.

Usage

Import the LottieAnimation component in your React application and use it as follows:

import React from 'react';
import LottieAnimation from 'lottie-animation';

const MyComponent = () => {
  const onComplete = () => {
    console.log('Animation completed!');
  };

  return (
    <LottieAnimation
      animationPath="path-to-your-lottie.json"
      loop={true}
      autoplay={true}
      style={{ width: 200, height: 200 }}
      className="my-custom-class"
      onComplete={onComplete}
    />
  );
};

export default MyComponent;

Props

The following props are available to customize the LottieAnimation:

Contributing

Contributions are always welcome!

License

Distributed under the MIT License. See LICENSE for more information.