National Patience Month

    lottie-react-with-react-17
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    lottie-react

    npm version npm downloads/month Build Status Codacy Badge Known Vulnerabilities Coverage Status Tested with jest GitHub license

    This project is meant to give developers full control over Lottie instance with minimal implementation by wrapping lottie-web in a Component or Hook that can be easily used in React applications.

    Installation

    Install react, react-dom and prop-types if you don’t have them already:

    Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0.

    npm i react@^16.8.0 react-dom@^16.8.0 prop-types@^15.5.7
    

    Install lottie-react using npm:

    npm i lottie-react
    

    Usage

    Component

    import Lottie from "lottie-react";
    import groovyWalkAnimation from "./groovyWalk.json";
    
    const Example = () => {
      return <Lottie animationData={groovyWalkAnimation} />;
    };
    
    export default Example;

    Try it on CodeSandbox

    Hook

    import { useLottie } from "lottie-react";
    import groovyWalkAnimation from "./groovyWalk.json";
    
    const Example = () => {
      const options = {
        animationData: groovyWalkAnimation,
        loop: true,
        autoplay: true,
      };
    
      const { View } = useLottie(options);
    
      return View;
    };
    
    export default Example;

    Try it on CodeSandbox

    Documentation

    Checkout the Documentation for more information and examples.

    Test

    npm test
    

    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

    Let us know if you have any suggestions or contributions. This package has the mission to help developers, so if you have any features that you think we should prioritize, reach out to us.

    Projects to check out

    • lottie-web - Lottie implementation for Web. Our project is based on it and you should check it because it will help you understand what's behind this package and it will give you a better understanding on what features should 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? LottieFiles is the way to go!

    License

    lottie-react is available under the MIT license.

    Thanks to David Probst Jr for the animations used in the examples.

    Install

    npm i lottie-react-with-react-17

    DownloadsWeekly Downloads

    11

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    242 kB

    Total Files

    13

    Last publish

    Collaborators

    • eyskim