Lottie animations in React: one component for the easy path, the whole engine when you need control.
\n\n
\n \n \n \n \n \n
\n\n## Installation\n\n```bash\nnpm i lottie-react\n```\n\n`react` and `react-dom` at 18.2 or newer are peer dependencies; [lottie-web](https://github.com/airbnb/lottie-web) comes with it.\nThe package is tree-shakeable: an import pays only for what it reaches.\n\n## Usage\n\n### The component\n\n```tsx\nimport { Lottie } from \"lottie-react\";\n\nexport function Hero() {\n return ;\n}\n```\n\n`src` takes a path, a URL, or the parsed animation object.\nThe animation fills its element, so size the element and you are done.\n\n### The hook\n\n```tsx\nimport { useLottie } from \"lottie-react\";\n\nexport function Hero() {\n const lottie = useLottie({ src: \"/hero.json\", autoplay: true, loop: true });\n return ;\n}\n```\n\nThe hook returns the instance: values that re-render with the animation, commands like `play` and `seek`, and a subscription point.\n\n## Documentation\n\nGuides, live examples and the full API reference: **[lottiereact.com](https://lottiereact.com)**.\n\nComing from v2? The [migration guide](https://lottiereact.com/docs/migration) maps every v2 surface onto v3.\n\n## Contributing\n\nIssues and pull requests are welcome.\n[CONTRIBUTING.md](https://github.com/Gamote/lottie-react/blob/main/CONTRIBUTING.md) carries the setup and the checks.\n\n## License\n\n[MIT](https://github.com/Gamote/lottie-react/blob/main/LICENSE.md)\n","readmeFilename":"README.md","users":{"yonathan-ashebir":true}}
![\"lottie-react\"](\"https://raw.githubusercontent.com/Gamote/lottie-react/main/website/public/lottie-logo.svg\"){kind=logo}
\n![\"npm](\"https://img.shields.io/npm/v/lottie-react.svg\")
\n ![\"npm](\"https://img.shields.io/npm/dm/lottie-react.svg\")
\n ![\"build](\"https://img.shields.io/github/actions/workflow/status/Gamote/lottie-react/check.yml\")
![\"coverage\"](\"https://codecov.io/github/Gamote/lottie-react/graph/badge.svg\"){kind=icon}
\n ![\"license\"](\"https://img.shields.io/npm/l/lottie-react.svg\")
\n