{"id":13422531,"url":"https://github.com/mifi/react-lottie-player","last_synced_at":"2025-05-15T05:05:31.544Z","repository":{"id":39020440,"uuid":"279123478","full_name":"mifi/react-lottie-player","owner":"mifi","description":"Fully declarative React Lottie player","archived":false,"fork":false,"pushed_at":"2025-01-22T09:26:23.000Z","size":5450,"stargazers_count":519,"open_issues_count":21,"forks_count":56,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-14T08:08:04.621Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mifi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"zenodo":null}},"created_at":"2020-07-12T18:23:19.000Z","updated_at":"2025-04-10T09:42:01.000Z","dependencies_parsed_at":"2024-01-20T05:31:10.582Z","dependency_job_id":"fa053cf7-8311-492c-bf9d-8210eaffd5af","html_url":"https://github.com/mifi/react-lottie-player","commit_stats":{"total_commits":193,"total_committers":17,"mean_commits":"11.352941176470589","dds":"0.36269430051813467","last_synced_commit":"8689ecb16b63606a9d4d04ed4dc7a34b3e7ac9a0"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mifi%2Freact-lottie-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mifi%2Freact-lottie-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mifi%2Freact-lottie-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mifi%2Freact-lottie-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mifi","download_url":"https://codeload.github.com/mifi/react-lottie-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276446,"owners_count":22043866,"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-07-30T23:00:47.211Z","updated_at":"2025-05-15T05:05:31.501Z","avatar_url":"https://github.com/mifi.png","language":"JavaScript","funding_links":[],"categories":["Utilities","JavaScript"],"sub_categories":["Framework bindings / integrations"],"readme":"![](https://github.com/mifi/gifs/raw/master/react-lottie-player.gif)\n\nFully declarative React Lottie player\n\nInspired by [several](https://github.com/felippenardi/lottie-react-web) [existing](https://github.com/chenqingspring/react-lottie) [packages](https://github.com/Gamote/lottie-react) wrapping [lottie-web](https://github.com/airbnb/lottie-web) for React, I created this package because I wanted something that just works and is easy to use. None of the alternatives properly handle changes of props like playing/pausing/segments. This lead to lots of hacks to get the animations to play correctly.\n\n`react-lottie-player` is a complete rewrite using hooks 🎣 for more readable code, easy to use, seamless and fully declarative control of the lottie player.\n\n![Tests](https://github.com/mifi/react-lottie-player/workflows/Tests/badge.svg) [![NPM](https://img.shields.io/npm/v/react-lottie-player.svg)](https://www.npmjs.com/package/react-lottie-player) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Features\n\n- Fully declarative\n- Handles state changes correctly\n- Does not [leak memory like lottie-web](https://github.com/mifi/react-lottie-player/issues/35) if you use repeaters\n- [LottiePlayerLight](#lottieplayerlight) support (no `eval`)\n- Alternative imperative API using ref (use at your own risk)\n\n## Install\n\n```bash\nnpm install --save react-lottie-player\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\n\nimport Lottie from 'react-lottie-player'\n// Alternatively:\n// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'\n\nimport lottieJson from './my-lottie.json'\n\nexport default function Example() {\n  return (\n    \u003cLottie\n      loop\n      animationData={lottieJson}\n      play\n      style={{ width: 150, height: 150 }}\n    /\u003e\n  )\n}\n```\n\n## Example\n\n\u003ca href=\"https://mifi.github.io/react-lottie-player/\"\u003e\n  \u003cimg src=\"screenshot.png\" width=\"400\" alt=\"Screenshot\" /\u003e\n\u003c/a\u003e\n\n[🎛 Live demo](https://mifi.github.io/react-lottie-player/)\n\n[👩🏿‍💻 Example code](example/src/App.jsx)\n\n## Lazy loading\n\n### Option 1: React code splitting (`React.lazy`)\n\nExtract your Lottie animation into a separate component, then lazy load it:\n\n```js\n// MyLottieAnimation.jsx\n\nimport Lottie from 'react-lottie-player';\nimport animation from './animation.json';\n\nexport default function MyLottieAnimation(props) {\n  return \u003cLottie animationData={animation} {...props} /\u003e;\n}\n\n// MyComponent.jsx\n\nimport React from 'react';\nconst MyLottieAnimation = React.lazy(() =\u003e import('./MyLottieAnimation'));\n\nexport default function MyComponent() {\n  return \u003cMyLottieAnimation play /\u003e;\n}\n```\n\n### Option 2: dynamic import with state\n\n```js\nconst Example = () =\u003e {\n  const [animationData, setAnimationData] = useState\u003cobject\u003e();\n\n  useEffect(() =\u003e {\n    import('./animation.json').then(setAnimationData);\n  }, []);\n\n  if (!animationData) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  return \u003cLottie animationData={animationData} /\u003e;\n}\n```\n\n### Option 3: `path` URL\n\n```js\nconst Example = () =\u003e \u003cLottie path=\"https://example.com/lottie.json\" /\u003e;\n```\n\n## Imperative API (ref)\n\n```js\nconst lottieRef = useRef();\n\nuseEffect(() =\u003e {\n  console.log(lottieRef.current.currentFrame);\n}, [])\n\nreturn \u003cLottie ref={lottieRef} /\u003e;\n```\n\nSee also [#11](https://github.com/mifi/react-lottie-player/issues/11)\n\n## LottiePlayerLight\n\nThe default lottie player uses `eval`. If you don't want eval to be used in your code base, you can instead import `react-lottie-player/dist/LottiePlayerLight`. For more discussion see [#39](https://github.com/mifi/react-lottie-player/pull/39).\n\n## Lottie animation track scrolling div\n\nSee [example/App.jsx](example/src/App.jsx) (ScrollTest) in [live example](https://mifi.github.io/react-lottie-player/).\n\n## Resize mode: cover\n\nIf you want the animation to fill the whole container, you can pass this prop. See also [#55](https://github.com/mifi/react-lottie-player/issues/55):\n\n```js\n\u003cLottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} /\u003e\n```\n\n## API\n\nSee [type definitions](src/index.d.ts) and [lottie-web](https://github.com/airbnb/lottie-web).\n\n## Releasing\n\n- Commit \u0026 wait for CI tests\n- `np`\n\n## Credits\n\n- https://lottiefiles.com/26514-check-success-animation\n- https://lottiefiles.com/38726-stagger-rainbow\n- Published with [create-react-library](https://github.com/transitive-bullshit/create-react-library) 😎\n\n## License\n\nMIT © [mifi](https://github.com/mifi)\n\n---\n\nMade with ❤️ in [🇳🇴](https://www.youtube.com/watch?v=uQIv8Vo9_Jc)\n\n[More apps by mifi.no](https://mifi.no/)\n\nFollow me on [GitHub](https://github.com/mifi/), [YouTube](https://www.youtube.com/channel/UC6XlvVH63g0H54HSJubURQA), [IG](https://www.instagram.com/mifi.no/), [Twitter](https://twitter.com/mifi_no) for more awesome content!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmifi%2Freact-lottie-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmifi%2Freact-lottie-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmifi%2Freact-lottie-player/lists"}