{"_id":"@bricehabib/react-lottie-player","_rev":"1-b3a8df1b5a30f5c62edcb74a22913591","name":"@bricehabib/react-lottie-player","dist-tags":{"latest":"1.4.2"},"versions":{"1.4.1":{"name":"@bricehabib/react-lottie-player","version":"1.4.1","description":"Fully declarative React Lottie player","author":{"name":"mifi"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/mifi/react-lottie-player.git"},"main":"dist/LottiePlayer.js","module":"dist/LottiePlayer.modern.js","engines":{"node":">=10"},"types":"dist/index.d.ts","scripts":{"build":"rm -rf dist && microbundle-crl src/LottiePlayer.js src/LottiePlayerLight.js --no-compress --format modern,cjs -o dist && cp src/*.d.ts dist","start":"rm -rf dist && microbundle-crl watch src/LottiePlayer.js src/LottiePlayerLight.js --no-compress --format modern,cjs -o dist","prepare":"run-s build","test":"run-s test:lint test:build test:unit","test:build":"run-s build","test:lint":"eslint .","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0"},"devDependencies":{"babel-eslint":"^10.0.3","cross-env":"^7.0.2","eslint":"^6.8.0","eslint-config-standard":"^14.1.0","eslint-config-standard-react":"^9.2.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^11.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.17.0","eslint-plugin-standard":"^4.0.1","execa":"^5.0.0","gh-pages":"^2.2.0","jest-image-snapshot":"^4.3.0","microbundle-crl":"^0.13.10","npm-run-all":"^4.1.5","puppeteer":"^7.0.4","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.1","wait-on":"^5.2.1"},"dependencies":{"fast-deep-equal":"^3.1.3","lodash.clonedeep":"^4.5.0","lottie-web":"^5.7.6"},"gitHead":"0fd6885e6159a16464e84648371ad929dcc1cee1","bugs":{"url":"https://github.com/mifi/react-lottie-player/issues"},"homepage":"https://github.com/mifi/react-lottie-player#readme","_id":"@bricehabib/react-lottie-player@1.4.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-S5kEcknHGWwzEAy7uMzn6s9rNO7zbNOPszOQqXJxZqtuOEvzjL6RbcSOk9eNqyPkR18Y3SGIRycF+MfAU8g5Sw==","shasum":"0bb61abc88870d700032928def083c39d769f54c","tarball":"https://registry.npmjs.org/@bricehabib/react-lottie-player/-/react-lottie-player-1.4.1.tgz","fileCount":13,"unpackedSize":561920,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoTEEaydh0qW7EvYEspQMqAD+lqXUDrsWqgKkoPshqzAiBOboLdvN2zMr/G376XB4DWPcw+QAKlNtdxOkeIZKTmLw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVWkJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKfw/9Gd+vGzCFo7OIc5ktHeUnkzGELpBQ/PmJm6ZbLrLTvY7t16Fx\r\nZekdY6a6HH3EC5OrVZ03y+92EdtN1mhUNMeYFCieUFwBfV8dP9SKbLXqNc1S\r\nwqywCR/8UJpqcoQQve/WbmPANIIEBR01kr8AISoLQES/ffy+WD9KwIx4a32K\r\nTFYEaXS+GnWenhGbUCYgFxj6FBFNq0iIHhPQUWcWpo68cV67AXzq/Sa+NXEb\r\nMeJg2zIoqbN/derFq+vc2CiEDH1jrj8AiA2SWXRpKlAgDYW3EpKBYUyVUMwq\r\n/lkjMUsYnSQDQOunmc6GBBAWgmzJvPSFgzsoS9tUHsHQ5wfKTcOOWSDiELLm\r\nLdJkUCe/5fGsbE+NXhj8bUBKSWvGiS+oTJjvDftW4vWaIoXhERrVXv7Rbyy6\r\nYPx12cFYomlVLAZN6w3yz7lw9/Mdkz/mj+wNV1rrOSOfr7L3LwCgzAMAkHfi\r\nkzXViqmDM9dTqHSWe55R0Dc9IINMabtIVyGFbh6rJWAhOAkCcUpZ49YTfwJW\r\nVQxe8+YP3ubbkiXMOrrOp4Kw4TBb+kCQQd2Hl+UoIKXEG4fgxMpIKc6Fhgt2\r\n2Q7FqPjV422OAmeOgFLaRd3FuKekNrvFEYJMeemL42n4r8HqYXHIwaMCPl9B\r\nhcudd2d86A3Fpc3VijVr1hiWpuLDn6x1pig=\r\n=Nuro\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bricehabib","email":"brice.belkadi@gmail.com"},"directories":{},"maintainers":[{"name":"bricehabib","email":"brice.belkadi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lottie-player_1.4.1_1649764616951_0.43855026416662324"},"_hasShrinkwrap":false},"1.4.2":{"name":"@bricehabib/react-lottie-player","version":"1.4.2","description":"Fully declarative React Lottie player","author":{"name":"mifi"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/mifi/react-lottie-player.git"},"main":"dist/LottiePlayer.js","module":"dist/LottiePlayer.modern.js","engines":{"node":">=10"},"types":"dist/index.d.ts","scripts":{"build":"rm -rf dist && microbundle-crl src/LottiePlayer.js src/LottiePlayerLight.js --no-compress --format modern,cjs -o dist && cp src/*.d.ts dist","start":"rm -rf dist && microbundle-crl watch src/LottiePlayer.js src/LottiePlayerLight.js --no-compress --format modern,cjs -o dist","prepare":"run-s build","test":"run-s test:lint test:build test:unit","test:build":"run-s build","test:lint":"eslint .","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0"},"devDependencies":{"babel-eslint":"^10.0.3","cross-env":"^7.0.2","eslint":"^6.8.0","eslint-config-standard":"^14.1.0","eslint-config-standard-react":"^9.2.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^11.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.17.0","eslint-plugin-standard":"^4.0.1","execa":"^5.0.0","gh-pages":"^2.2.0","jest-image-snapshot":"^4.3.0","microbundle-crl":"^0.13.10","npm-run-all":"^4.1.5","puppeteer":"^7.0.4","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.1","wait-on":"^5.2.1"},"dependencies":{"fast-deep-equal":"^3.1.3","lodash.clonedeep":"^4.5.0","lottie-web":"^5.7.6"},"gitHead":"855a7e6e8fef8ed53cc295469422211a14b2e93d","bugs":{"url":"https://github.com/mifi/react-lottie-player/issues"},"homepage":"https://github.com/mifi/react-lottie-player#readme","_id":"@bricehabib/react-lottie-player@1.4.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-YzDkYTfIe6Ox2/0wf/B8ekzBA9qwdYPyydK6i+B8ZVNwxw/0/j0rXo5dFZnvWQ6MVvhbtqAf1ndywdDbPjRrdg==","shasum":"80f572a6fa9f5d226cc9d9a32741ffe7dbab6739","tarball":"https://registry.npmjs.org/@bricehabib/react-lottie-player/-/react-lottie-player-1.4.2.tgz","fileCount":13,"unpackedSize":561956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiTX0Lm1miWPrF96DhysbcYaOpNL+GGxTUjWZz/KxI+AiEAs5U0vcPhTkbL8G0oY2QtyqaxFdeTj9dKcoDjZnUTU9E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVY+yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY4Q//UlzEjQRDu2O1YyLHdvuaWW5WepAH0CKyUgsxfNmA+OeyjQ1O\r\nXKzaBBUNom9YEt8lfRXPGHKItvJqhHpRw/xox4r/B3nU00sCyWhDBkCUdXW0\r\nkEYnkeM+tVX5DTyEgF1l1mA/MD7swQ+r7ZgG8Oj/jfFtU6P3htqDMWT7Ledw\r\nNe4rx2l6QeofJ+mnrQIObitlv+BVS5tz5URveHNcM0rGP5O4PR64stSjDayZ\r\nNORASoY5azOsrD2+uoV16JML0jSaS7v9V4Usn49WuRoRV28n+hqgVmNTxN1k\r\nrAUDIBsdRDhuv7r3KJvdBrSIcwP5GkNVsJB5mX2OckUbBTBmkn0FPKra+ipV\r\nYqjwCh6p2fnsD9fVd4zp4YQ7+qBd1lSuxpNW0irNvLoVPKkbiXYzbuhvESUp\r\n4D1MrsSlyR94kxPtzYGZMgKv5a+jxNM1KQq8XsJxRFkQo/4JWiWwV3clB/6B\r\naKF/LGtuE/ThANU9Rwx2py649SdPXC6mltOLELpGu6GddbcEZdx+3WUcgNbJ\r\nBHbq98vgtVX34ok1wBPisCBeEE8EOj6nfDfVnLOesC+xETecBrrpu+yKJhr8\r\n5JPDKMC7pzuFhXs6SBh9PxhevlAbac80Rav5NoLS1DP3V1r7sUH7ydf8ZIva\r\nzAozYLfzImhxAnNeajNSg8Gy9KTh2CTNV+s=\r\n=9OtY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bricehabib","email":"brice.belkadi@gmail.com"},"directories":{},"maintainers":[{"name":"bricehabib","email":"brice.belkadi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lottie-player_1.4.2_1649774514173_0.942739391300317"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-12T11:56:56.885Z","1.4.1":"2022-04-12T11:56:57.315Z","modified":"2022-04-12T14:41:54.407Z","1.4.2":"2022-04-12T14:41:54.340Z"},"maintainers":[{"name":"bricehabib","email":"brice.belkadi@gmail.com"}],"description":"Fully declarative React Lottie player","homepage":"https://github.com/mifi/react-lottie-player#readme","repository":{"type":"git","url":"git+https://github.com/mifi/react-lottie-player.git"},"author":{"name":"mifi"},"bugs":{"url":"https://github.com/mifi/react-lottie-player/issues"},"license":"MIT","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 simple 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 modern hooks 🎣 for more readable code, an easy to use, seamless and **fully declarative control of the lottie player**.\n\nDoes not [leak memory like lottie-web](https://github.com/mifi/react-lottie-player/issues/35)  if you use repeaters.\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## Install\n\n```bash\nnpm install --save react-lottie-player\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport Lottie from 'react-lottie-player'\n// Alternatively:\n// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'\n\n\nimport lottieJson from './my-lottie.json'\n\nexport default function Example() {\n  return (\n    <Lottie\n      loop\n      animationData={lottieJson}\n      play\n      style={{ width: 150, height: 150 }}\n    />\n  )\n}\n```\n\n## Example\n\n[![](screenshot.png)](https://mifi.github.io/react-lottie-player/)\n\n[Open live example](https://mifi.github.io/react-lottie-player/)\n\n[View example code](https://github.com/mifi/react-lottie-player/blob/master/example/src/index.js)\n\n## Lazy loading example\n\n```js\nconst MyComponent = () => {\n  const [animationData, setAnimationData] = useState();\n\n  useEffect(() => {\n    import('./animation.json').then(setAnimationData);\n  }, []);\n\n  if (!animationData) return <div>Loading...</div>;\n  return <Lottie animationData={animationData} />;\n}\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.js](https://github.com/mifi/react-lottie-player/blob/master/example/src/App.js) (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<Lottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} />\n```\n\n## API\n\nSee https://github.com/airbnb/lottie-web\n\n[View PropTypes](https://github.com/mifi/react-lottie-player/blob/64eac186947be7ee5aad304ca4193c507ace8dc3/src/index.js#L147)\n\n## Releasing\n\n- Commit & 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","readmeFilename":"README.md"}