Nimble Prime Musketeers

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

    2.3.1 • Public • Published

    lottie-react

    npm version npm downloads/month 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

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

      Note: This library is using React Hooks so the minimum version required for both react and react-dom is v16.8.0.

    2. Install lottie-react using yarn

      yarn add lottie-react

      or npm

      npm i lottie-react

    Usage

    Using the component (try it)

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

    Using the Hook (try it)

    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;

    📄 Documentation

    Checkout the documentation at https://lottiereact.com for more information and examples.

    Tests

    Run the tests using the yarn test command.

    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

    Any questions or suggestions? Use the Discussions tab. Any issues? Don't hesitate to document it in the Issues tab, and we will do our best to investigate it and fix it. Any solutions? You are very welcomed to open a pull request.

    👩‍💻 v3 is 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 the v3 branch. 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-react is available under the MIT license.

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

    Install

    npm i lottie-react

    DownloadsWeekly Downloads

    118,823

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    228 kB

    Total Files

    13

    Last publish

    Collaborators

    • gamote