LottieAnimation
is a lightweight and straightforward React component for adding beautiful animations using Lottie files in your web project.
- 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.
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.
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;
The following props are available to customize the LottieAnimation
:
Prop | Type | Default | Description |
---|---|---|---|
animationPath |
string |
Required. The path to the Lottie JSON file. | |
loop |
boolean |
true |
Determines if the animation should loop. |
autoplay |
boolean |
true |
Determines if the animation should start automatically. |
style |
object |
Inline styles for the animation container. | |
className |
string |
CSS class for the animation container. | |
onComplete |
function |
Callback function when the animation completes. |
Contributions are always welcome!
Distributed under the MIT License. See LICENSE
for more information.