{"id":13623823,"url":"https://github.com/Gamote/lottie-react","last_synced_at":"2025-04-15T20:32:32.299Z","repository":{"id":37411000,"uuid":"251413029","full_name":"Gamote/lottie-react","owner":"Gamote","description":"A lightweight React library for rendering complex After Effects animations in real time using Lottie.","archived":false,"fork":false,"pushed_at":"2024-06-26T23:40:51.000Z","size":8809,"stargazers_count":785,"open_issues_count":34,"forks_count":59,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-30T00:36:41.379Z","etag":null,"topics":["animation","component","hook","hooks","lottie","lottie-react","lottie-web","react","react-hooks","web"],"latest_commit_sha":null,"homepage":"https://lottiereact.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gamote.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Gamote"]}},"created_at":"2020-03-30T19:51:33.000Z","updated_at":"2024-10-29T19:49:50.000Z","dependencies_parsed_at":"2024-01-03T19:26:59.086Z","dependency_job_id":"bdae12dc-72d0-4310-8ea9-c37124b6e71c","html_url":"https://github.com/Gamote/lottie-react","commit_stats":{"total_commits":159,"total_committers":10,"mean_commits":15.9,"dds":0.09433962264150941,"last_synced_commit":"fed9aa1399ed37e4ac95139031c691087f0913ba"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gamote%2Flottie-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gamote%2Flottie-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gamote%2Flottie-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gamote%2Flottie-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gamote","download_url":"https://codeload.github.com/Gamote/lottie-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223684807,"owners_count":17185714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","component","hook","hooks","lottie","lottie-react","lottie-web","react","react-hooks","web"],"created_at":"2024-08-01T21:01:36.056Z","updated_at":"2024-11-08T12:30:22.998Z","avatar_url":"https://github.com/Gamote.png","language":"TypeScript","readme":"# lottie-react\n\n[![npm version](https://img.shields.io/npm/v/lottie-react)](https://www.npmjs.com/package/lottie-react) [![npm downloads/month](https://img.shields.io/npm/dm/lottie-react)](https://www.npmjs.com/package/lottie-react) [![Known Vulnerabilities](https://snyk.io/test/github/Gamote/lottie-react/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Gamote/lottie-react?targetFile=package.json) [![Coverage Status](https://coveralls.io/repos/github/Gamote/lottie-react/badge.svg?branch=master)](https://coveralls.io/github/Gamote/lottie-react?branch=master) [![Tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Gamote/lottie-react/blob/master/LICENSE)\n\nThis project is meant to give developers full control over **[Lottie](https://airbnb.design/lottie/)** instance with minimal implementation by wrapping **[lottie-web](https://github.com/airbnb/lottie-web)** in a Component or Hook that can be easily used in **React** applications.\n\n## Installation\n\n1. Make sure you have the peer-dependencies installed: `react` and `react-dom`.\n\n    \u003e _**Note:** This library is using React Hooks so the **minimum** version required for both **react** and **react-dom** is **v16.8.0**._\n\n2. Install `lottie-react` using **yarn**\n\n    ```shell\n    yarn add lottie-react\n    ```\n   \n    or **npm**\n\n    ```shell\n    npm i lottie-react\n    ```\n\n## Usage\n\n### Using the component ([try it](https://codesandbox.io/s/lottie-react-component-2k13t))\n\n```tsx\nimport React from \"react\";\nimport Lottie from \"lottie-react\";\nimport groovyWalkAnimation from \"./groovyWalk.json\";\n\nconst App = () =\u003e \u003cLottie animationData={groovyWalkAnimation} loop={true} /\u003e;\n\nexport default App;\n```\n\n### Using the Hook ([try it](https://codesandbox.io/s/lottie-react-hook-13nio))\n\n```tsx\nimport React from \"react\";\nimport { useLottie } from \"lottie-react\";\nimport groovyWalkAnimation from \"./groovyWalk.json\";\n\nconst App = () =\u003e {\n  const options = {\n    animationData: groovyWalkAnimation,\n    loop: true\n  };\n\n  const { View } = useLottie(options);\n\n  return \u003c\u003e{View}\u003c/\u003e;\n};\n\nexport default App;\n```\n\n### 📄 Documentation\n\nCheckout the [**documentation**](https://lottiereact.com) at [**https://lottiereact.com**](https://lottiereact.com) for more information and examples.\n\n## Tests\n\nRun the tests using the `yarn test` command.\n\n### Coverage report\n```text\n-----------------------------|---------|----------|---------|---------|-------------------\nFile                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n-----------------------------|---------|----------|---------|---------|-------------------\nAll files                    |     100 |      100 |     100 |     100 |                   \n components                  |     100 |      100 |     100 |     100 |                   \n  Lottie.ts                  |     100 |      100 |     100 |     100 |                   \n hooks                       |     100 |      100 |     100 |     100 |                   \n  useLottie.tsx              |     100 |      100 |     100 |     100 |                   \n  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   \n-----------------------------|---------|----------|---------|---------|-------------------\n```\n\n## Contribution\n\nAny **questions** or **suggestions**? Use the [**Discussions**](https://github.com/Gamote/lottie-react/discussions) tab. Any **issues**? Don't hesitate to document it in the [**Issues**](https://github.com/Gamote/lottie-react/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**](https://github.com/Gamote/lottie-react/pulls).\n\n\u003e 👩‍💻 `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. :)\n\nThank you for investing your time in contributing to our project! ✨\n\n## Projects to check out\n\n- [lottie-web](https://github.com/airbnb/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.\n- [lottie-android](https://github.com/airbnb/lottie-android) - Lottie implementation for Android\n- [lottie-ios](https://github.com/airbnb/lottie-ios) - Lottie implementation for iOS\n- [lottie-react-native](https://github.com/react-native-community/lottie-react-native) - Lottie implementation for React Native\n- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations files? LottieFiles has a lot of them!\n\n## License\n\n**lottie-react** is available under the [MIT license](https://github.com/Gamote/lottie-react/blob/main/LICENSE).\n\nThanks to [David Probst Jr](https://lottiefiles.com/davidprobstjr) for the animations used in the examples.\n","funding_links":["https://github.com/sponsors/Gamote"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGamote%2Flottie-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGamote%2Flottie-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGamote%2Flottie-react/lists"}