{"id":15440756,"url":"https://github.com/jonluca/lottie-react-component","last_synced_at":"2025-08-25T20:13:34.266Z","repository":{"id":50266268,"uuid":"518650865","full_name":"jonluca/lottie-react-component","owner":"jonluca","description":"Render your lottie animations in React","archived":false,"fork":false,"pushed_at":"2023-01-09T07:34:29.000Z","size":96,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-14T00:47:11.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonluca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-28T00:35:12.000Z","updated_at":"2023-03-17T13:09:02.000Z","dependencies_parsed_at":"2023-02-08T09:15:56.816Z","dependency_job_id":null,"html_url":"https://github.com/jonluca/lottie-react-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonluca%2Flottie-react-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonluca%2Flottie-react-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonluca%2Flottie-react-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonluca%2Flottie-react-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonluca","download_url":"https://codeload.github.com/jonluca/lottie-react-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261605,"owners_count":20910108,"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":[],"created_at":"2024-10-01T19:15:14.214Z","updated_at":"2025-04-04T23:12:23.066Z","avatar_url":"https://github.com/jonluca.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lottie for React\n\n[![npm Version](https://img.shields.io/npm/v/lottie-react-component.svg)](https://www.npmjs.com/package/lottie-react-component) [![License](https://img.shields.io/npm/l/lottie-react-component.svg)](https://www.npmjs.com/package/lottie-react-native)\n\n**Lottie component for React** with runtime animation control and full typescript support.\n\n# Introduction\n\nLottie is a library for the Web, Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as JSON with [bodymovin](https://github.com/bodymovin/bodymovin) and renders them natively on each platform!\n\nFor the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand.\n\n_This library is a [lottie-react-web](https://github.com/felippenardi/lottie-react-web) fork that adds native typescript support, esm and cjs compatibility, and a rewrite with hooks_\n\n# Getting Started\n\nGet started with Lottie by installing the node module with yarn or npm:\n\n```\nyarn add lottie-react-component\n```\n\nor\n\n```\nnpm i --save lottie-react-component\n```\n\n# Usage\n\n`\u003cLottie\u003e` component can be used in a declarative way:\n\n```jsx\nimport React from \"react\";\nimport Lottie from \"lottie-react-component\";\nimport animation from \"./animation.json\";\n\nconst App = () =\u003e \u003cLottie animationData={animation} loop /\u003e;\n\nexport default App;\n```\n\nBy default it will automatically play the animation in loop.\n\nLottie's animation control can be set via props. Here is an example of a toggle animation that reacts on click:\n\n```jsx\nimport React, { Component } from 'react';\nimport Lottie from 'lottie-react-component'\nimport toggleAnimation from './toggleAnimation.json'\n\nexport default const App = () =\u003e {\n  const [isToggled, setIsToggled] = useState(false);\n\n  return  (\n    \u003cdiv\n      onClick={() =\u003e {\n        setIsToggled(t =\u003e !t);\n      }}\n    \u003e\n      \u003cLottie\n        direction={isToggled ? 1 : -1}\n        animationData={toggleAnimation}\n        loop={false}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## API\n\nThese are all props available:\n\n### Props\n\n| Prop                   | Description                                                                                                                                                        | Default       |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |\n| **`animationData`**    | **Mandatory** - The source of the animation.                                                                                                                       | —             |\n| **`assetsPath`**       | **Mandatory** - The root path for external assets.                                                                                                                 | `images`      |\n| **`loop`**             | Play animation non-stop in a loop.                                                                                                                                 | `true`        |\n| **`autoplay`**         | Automatically play animation when it is instantiated.                                                                                                              | `true`        |\n| **`renderer`**         | The method for rendering the animation.                                                                                                                            | `svg`         |\n| **`rendererSettings`** | Customize bodymovin aspect ratio configurations.                                                                                                                   | —             |\n| **`animationControl`** | This is where you can change the animation at runtime. A key value pair of a After Effects property path and the a custom value to apply to it. See details below. | —             |\n| **`width`**            | Sets the width of the animation container.                                                                                                                         | `100%`        |\n| **`height`**           | Sets the heigth of the animation container.                                                                                                                        | `100%`        |\n| **`isStopped`**        | A boolean flag indicating whether or not the animation is stopped.                                                                                                 | `false`       |\n| **`isPaused`**         | A boolean flag indicating whether or not the animation is paused.                                                                                                  | `false`       |\n| **`speed`**            | An integer indicating the speed of the animation ( `1` is `100%`.)                                                                                                 | `1`           |\n| **`direction`**        | An integer indicating wether the animation progresses in the usual (`1`) or reverse (`-1`) direction                                                               | `1`           |\n| **`ariaRole`**         | A string indicating the animation container `ariaRole` property                                                                                                    | `\"button\"`    |\n| **`ariaLabel`**        | A string indicating the animation container `ariaLabel` property                                                                                                   | `\"animation\"` |\n| **`title`**            | A string indicating the animation container `title` property                                                                                                       | `\"\"`          |\n\n## Changing animation at runtime\n\nYou can target an specific After Effects layer property and change it at\nruntime by passing setting a `property` object on the `\u003cLottie\u003e` prop. Example:\n\n```jsx\nimport React from \"react\";\nimport Lottie from \"lottie-react-component\";\nimport animation from \"./animation.json\";\n\nconst Animation = ({ x, y }) =\u003e (\n  \u003cLottie\n    animationData={animation}\n    animationControl={{\n      \"Square,Transform,Position\": [x, y],\n    }}\n  /\u003e\n);\n\nexport default Animation;\n```\n\nThis will override the `Position` value of the layer `JoyStkCtrl01` at runtime.\n\nLottie is compatible with [Joystick 'n Sliders](https://aescripts.com/joysticks-n-sliders/) After Effects plugin, so you can create amazing animations easily.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonluca%2Flottie-react-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonluca%2Flottie-react-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonluca%2Flottie-react-component/lists"}