{"_id":"@1hive/lottie-react-web","_rev":"5-928c1fddf69f97098eebd81d80c1c91d","name":"@1hive/lottie-react-web","dist-tags":{"latest":"2.2.4"},"versions":{"2.2.3":{"name":"@1hive/lottie-react-web","version":"2.2.3","description":"Lottie wrapper for React on the web.","types":"./index.d.ts","repository":{"type":"git","url":"git+https://github.com/felippenardi/lottie-react-web.git"},"license":"MIT","scripts":{"release":"git add package.json && git commit -m 'chore: bump version number' && standard-version --first-release && git push --follow-tags origin master && npm publish","prepublish":". ./.scripts/prepublish.sh","lint":"eslint src","lintfix":"eslint src --fix","testonly":"mocha --require .scripts/mocha_runner src/**/tests/**/*.js","test":"npm run lint && npm run testonly","test-watch":"npm run testonly -- --watch --watch-extensions js","start":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh","postpublish":"npm run publish-storybook"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^6.1.2","babel-loader":"^6.2.5","babel-plugin-transform-runtime":"^6.15.0","babel-polyfill":"^6.26.0","babel-preset-react-app":"^0.2.1","chai":"^3.5.0","enzyme":"^2.2.0","eslint":"^3.6.0","eslint-config-airbnb":"^12.0.0","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.2","eslint-plugin-react":"^6.3.0","git-url-parse":"^6.0.1","jsdom":"^9.5.0","mocha":"^5.2.0","prop-types":"^15.6.1","react":"^15.6.2","react-addons-test-utils":"^15.6.2","react-dom":"^15.6.2","sinon":"^1.17.6","standard-version":"^8.0.0"},"peerDependencies":{"react":"^0.14.7 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"^6.26.0","global":"^4.4.0","lottie-api":"^1.0.2","lottie-web":"^5.6.1"},"main":"dist/index.js","engines":{"npm":"^3.0.0"},"gitHead":"17b9dd5580bc7c1c28161d7bb4fb702307f7829c","bugs":{"url":"https://github.com/felippenardi/lottie-react-web/issues"},"homepage":"https://github.com/felippenardi/lottie-react-web#readme","_id":"@1hive/lottie-react-web@2.2.3","_nodeVersion":"16.4.2","_npmVersion":"7.18.1","dist":{"integrity":"sha512-gkvwkZ76mg94YoTocO0HheImIKH8Rbx1wHOtz/ALpuWhzSd8NMYr0l5S5yeSioVXkxOOpUDeBWMRN8WhgNSmXQ==","shasum":"efefadb66665b60be53863c7e9bc3200b9ddc4c4","tarball":"https://registry.npmjs.org/@1hive/lottie-react-web/-/lottie-react-web-2.2.3.tgz","fileCount":18,"unpackedSize":298292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGGUpCRA9TVsSAnZWagAA7P0QAJ4//XDZ2IUQGmWbOqiZ\nnDbnAih1dmq+tV9syvmSNeIMYHb3E/1lsTlV3BV+AmEwQNqm0aRa4MazQqs2\nuuqMhnpaZWZuue1iPJ7tc/3jdavkpQtRZJT9qqUAdw47wva9gFe755ptAVWp\ni2XE0zYV4P7X4N9iyz8kah59XS26v+Px7ejqZmrb02arHJsw8lUp4kdZnIXM\nKAMCvbc2TDIhupQCIZxbCheKwxwPFVxKW7NAnE4sVyCCflGxmNN/F027fFqg\nngFdFyZmpcE/uC9zaszIBCmjTE/lQ9I0MU+FXITzKOg0JLOO2ecpmXNcOO4l\nibLV6TNAP6X02Q5IZ3c3fyOCC9Fb4gnhvmrDD4b+5Nd9q8QmtIgI/15oK+Pj\nrgbQ6w8ZuayyFN2XnhPiHSLL3A11Q1WPSh8Ml3Q4gdaaFeheypZrH7HCNr3+\n+OWA9P407OxC9I/jNPNhrmv3MIkTjfo99vchuKGPIinaPX5GBN6wodDOJnCr\nH5FHOCsZcNY9lQEi3KfU+N+UiF4Fm0ypLYTQzD8IxqA/cA6ZbWNfMQAjo91B\nRCLsNnRr27TDueQHy9/yAbj2F7eq2k5BiPnSG/Jprgj8lFbkkJJOwAI6gGVO\noePQ7nN9oOv/SMvRPrpQ0Ep8vEUs3/rwgcaqUMPI7S2or576MZO0IcYeaUk2\nQh6F\r\n=8O+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDefzQaKFGkmXpU5wRiqf0EbZ4H0GIbQxEXFeFduX6F8QIhAJRJ9NhLA1SVPw2HhLovJW4iPFfKTjX/puzeX+ghHEHk"}]},"_npmUser":{"name":"gabrielg","email":"gabrielpk.18@gmail.com"},"directories":{},"maintainers":[{"name":"gabrielg","email":"gabrielpk.18@gmail.com"},{"name":"fabriv","email":"fabriziovigevani@gmail.com"},{"name":"starsower","email":"sembrestels@gmail.com"},{"name":"willjgriff","email":"willjgriff@gmail.com"},{"name":"rperez89","email":"rodrigopi1989@gmail.com"},{"name":"crisog","email":"ortega.cpp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-react-web_2.2.3_1628988713187_0.25328572211892464"},"_hasShrinkwrap":false},"2.2.4":{"name":"@1hive/lottie-react-web","version":"2.2.4","description":"Lottie wrapper for React on the web.","types":"./index.d.ts","repository":{"type":"git","url":"git+https://github.com/felippenardi/lottie-react-web.git"},"license":"MIT","scripts":{"release":"git add package.json && git commit -m 'chore: bump version number' && standard-version --first-release && git push --follow-tags origin master && npm publish","prepublish":". ./.scripts/prepublish.sh","lint":"eslint src","lintfix":"eslint src --fix","testonly":"mocha --require .scripts/mocha_runner src/**/tests/**/*.js","test":"npm run lint && npm run testonly","test-watch":"npm run testonly -- --watch --watch-extensions js","start":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh","postpublish":"npm run publish-storybook"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^6.1.2","babel-loader":"^6.2.5","babel-plugin-transform-runtime":"^6.15.0","babel-polyfill":"^6.26.0","babel-preset-react-app":"^0.2.1","chai":"^3.5.0","enzyme":"^2.2.0","eslint":"^3.6.0","eslint-config-airbnb":"^12.0.0","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.2","eslint-plugin-react":"^6.3.0","git-url-parse":"^6.0.1","jsdom":"^9.5.0","mocha":"^5.2.0","prop-types":"^15.6.1","react":"^15.6.2","react-addons-test-utils":"^15.6.2","react-dom":"^15.6.2","sinon":"^1.17.6","standard-version":"^8.0.0"},"peerDependencies":{"react":"^0.14.7 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"^6.26.0","global":"^4.4.0","lottie-api":"^1.0.2","lottie-web":"^5.6.1"},"main":"dist/index.js","engines":{"npm":"^3.0.0"},"gitHead":"17b9dd5580bc7c1c28161d7bb4fb702307f7829c","bugs":{"url":"https://github.com/felippenardi/lottie-react-web/issues"},"homepage":"https://github.com/felippenardi/lottie-react-web#readme","_id":"@1hive/lottie-react-web@2.2.4","_nodeVersion":"16.4.2","_npmVersion":"7.18.1","dist":{"integrity":"sha512-LEiv6it9/iAvDyVY27rKyD5SgZDH7niZwaJeZEU+Ss4CM4mfPWAGTIp7nAWLKF/IKfIavYzigOT5YIfz0OMK6A==","shasum":"b150d39cfb4603a1c579a547e6a5958de08e11c2","tarball":"https://registry.npmjs.org/@1hive/lottie-react-web/-/lottie-react-web-2.2.4.tgz","fileCount":26,"unpackedSize":2612065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGGbHCRA9TVsSAnZWagAAB6AP/2XmjwMoMkYg4D40mRqt\niZBGikbCv9BGixfFYGQyZjSaJwkzhVhAIbWV+KOPSeOUu7ogJR3QvaP+xNJl\nx0iHajgj/37v9N3ebQnTty7t4LBjAMkBf8b0aUd8DuWrj6cHSKio/N4dOh/k\nWJGO7UIPr8bZNG1uZrMOAPdEICEdKj3Zl0n1l85XYbixoVvhF3LqcuNEQ44W\nivETi2EZghFyqH3N/F4jlLA0wrvOH9i2wnKN4hencVIIDZ8JI9cSo2JoU1SZ\nZ+TUN+jWAna+OIQT0hCb1tN9y13/iC9lF1jPwPRBbknTeIPvByxbUIg+lPCH\nSSAGhSkD8gi7z+WEkllCATfS536tSOU34LzC7YdzZZTrs7h/Mzw5EMtDKUcC\n+0H7GkDBd0oMEtJ0E3+eJiPJ0c18+azYDV+09XmvpUMokfF+FpClg/bvkTie\ntLODfT34bqijBp1FkQ3woL/IM032V6DmZhdCO2ov7Se22Z9MS7ncdIILPU6z\nIXm1E77BWGwB4seS/Q+Fea06uGfJLaJF76hZ2skr7AH90SawiJ+bA/2CAQMJ\nTtPZ3GQs6PDS1oOAIGU1pcOp+gxE68rFmnqfB4xyVvlZkziSyeuD8L37dn17\n8vXRBqb9zlnDwtUUhzV+1ravDhjwbl4NQ98GZaxhrLj6fSIGgUlREyTWN+qI\nVhkv\r\n=LkZP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgPmLxR/FQeJ43lRip9NA+1+s8scBT8TPk2CQyxn71WgIgZxqtKR7oNxDz78zEX8jymYUswDzTwcN1MVuoIx6h7rk="}]},"_npmUser":{"name":"gabrielg","email":"gabrielpk.18@gmail.com"},"directories":{},"maintainers":[{"name":"gabrielg","email":"gabrielpk.18@gmail.com"},{"name":"fabriv","email":"fabriziovigevani@gmail.com"},{"name":"starsower","email":"sembrestels@gmail.com"},{"name":"willjgriff","email":"willjgriff@gmail.com"},{"name":"rperez89","email":"rodrigopi1989@gmail.com"},{"name":"crisog","email":"ortega.cpp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-react-web_2.2.4_1628989127486_0.8194985022526098"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-15T00:51:53.130Z","2.2.3":"2021-08-15T00:51:53.386Z","modified":"2024-05-01T23:03:49.388Z","2.2.4":"2021-08-15T00:58:47.786Z"},"maintainers":[{"email":"windholyghost@gmail.com","name":"kamikazebr"},{"email":"gabrielpk.18@gmail.com","name":"gabrielg"},{"email":"fabriziovigevani@gmail.com","name":"fabriv"},{"email":"sembrestels@gmail.com","name":"starsower"},{"email":"willjgriff@gmail.com","name":"willjgriff"},{"email":"rodrigopi1989@gmail.com","name":"rperez89"}],"description":"Lottie wrapper for React on the web.","homepage":"https://github.com/felippenardi/lottie-react-web#readme","repository":{"type":"git","url":"git+https://github.com/felippenardi/lottie-react-web.git"},"bugs":{"url":"https://github.com/felippenardi/lottie-react-web/issues"},"license":"MIT","readme":"Lottie for React, [React Native](https://github.com/react-community/lottie-react-native), [iOS](https://github.com/airbnb/lottie-ios), and [Android](https://github.com/airbnb/lottie-android)\n===\n\n[](https://www.npmjs.com/package/lottie-react-web) [](https://www.npmjs.com/package/lottie-react-native)\n\n![](\"images/lottie.png\")
\n
\n\n**Lottie component for React** with runtime animation control.\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 [react-lottie](https://github.com/chenqingspring/react-lottie) fork that adds the capability for **runtime animation control** and fixes lots of bugs.*\n\n# Getting Started\n\nGet started with Lottie by installing the node module with yarn or npm:\n\n```\nyarn add lottie-react-web\n```\nor\n```\nnpm i --save lottie-react-web\n```\n\n# Usage\n\n`` component can be used in a declarative way:\n\n```jsx\nimport React from 'react';\nimport Lottie from 'lottie-react-web'\nimport animation from './animation.json'\n\nconst App = () => (\n \n)\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-web'\nimport toggleAnimation from './toggleAnimation.json'\n\nexport default class App extends Component {\n this.state = { isToggled: false }\n\n render() (\n {\n this.setState(state => { isToggled: !state.isToggled})\n }}\n >\n \n \n )\n)\n\nexport default App\n```\n\n## API\nThese are all props available:\n\n\n### Props\n\n| Prop | Description | Default |\n|---|---|---|\n|**`options`**| **Mandatory** - The object representing the animation settings that will be instantiated by bodymovin. Defines the source of animation (`animationData`), loop, autoplay, a few others. See details in the section below. | `{ autoplay: true, loop: true } ` |\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|**`segments`**| An array of two integers indicating the beginning and ending frame of the animation | Defaults to play entire animation |\n|**`forceSegments`**| A boolean indicating wether the segments should play immediately or sequentially | `false` |\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### Options object\nDefines the animation settings that will be instantiated by bodymovin. Currently a subset of the bodymovin options are supported.\n\nEither the animationData OR path must be specified.\n\n| Prop | Description | Default |\n|---|---|---|\n|**`animationData`**| **Mandatory** - The source of the animation. | — |\n|**`path`**| **Mandatory** - The path to 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\n## Changing animation at runtime\nYou can target an specific After Effects layer property and change it at\nruntime by passing setting a `property` object on the `` prop. Example:\n\n```jsx\nimport React from 'react';\nimport Lottie from 'lottie-react-web'\nimport animation from './animation.json'\n\nconst Animation = ({ x, y }) => (\n \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\n![](\"images/ae_layer.png\")
\n","readmeFilename":"README.md"}