lottie-react

This project is meant to give developers full control overLottieinstance with minimal implementation by wrappinglottie-webin a Component or Hook that can be easily used inReactapplications.

Installation

1. Make sure you have the peer-dependencies installed:reactandreact-dom.

   Note:This library is using React Hooks so theminimumversion required for bothreactandreact-domisv16.8.0.

2. Installlottie-reactusingyarn

   yarn add lottie-react

   ornpm

   npm i lottie-react

Usage

Using the component (try it)

importReactfrom"react";
importLottiefrom"lottie-react";
importgroovyWalkAnimationfrom"./groovyWalk.json";

constApp=()=><LottieanimationData={groovyWalkAnimation}loop={true}/>;

exportdefaultApp;

Using the Hook (try it)

importReactfrom"react";
import{useLottie}from"lottie-react";
importgroovyWalkAnimationfrom"./groovyWalk.json";

constApp=()=>{
constoptions={
animationData:groovyWalkAnimation,
loop:true
};

const{View}=useLottie(options);

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

exportdefaultApp;

📄 Documentation

Checkout thedocumentationathttps://lottiereactfor more information and examples.

Tests

Run the tests using theyarn testcommand.

Coverage report

-----------------------------|---------|----------|---------|---------|-------------------
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 |
-----------------------------|---------|----------|---------|---------|-------------------

Contribution

Anyquestionsorsuggestions?Use theDiscussionstab. Anyissues?Don't hesitate to document it in theIssuestab, and we will do our best to investigate it and fix it. Anysolutions?You are very welcomed to open apull request.

👩‍💻v3is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under thev3branch. And of course, you are encouraged to contribute.:)

Thank you for investing your time in contributing to our project! ✨

Projects to check out

• lottie-web- Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
• lottie-android- Lottie implementation for Android
• lottie-ios- Lottie implementation for iOS
• lottie-react-native- Lottie implementation for React Native
• LottieFiles- Are you looking for animations files? LottieFiles has a lot of them!

License

lottie-reactis available under theMIT license.

Thanks toDavid Probst Jrfor the animations used in the examples.