{"_id":"@dreamfliper/lottie-light-react-web","_rev":"2-2d52bcfbd81a69744313aa146e78f691","name":"@dreamfliper/lottie-light-react-web","dist-tags":{"latest":"2.1.16"},"versions":{"2.1.15":{"name":"@dreamfliper/lottie-light-react-web","version":"2.1.15","description":"Lottie-light wrapper for React on the web.","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":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/plugin-proposal-class-properties":"^7.4.0","@babel/plugin-transform-runtime":"^7.4.0","@babel/polyfill":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/register":"^7.4.0","@babel/runtime":"^7.4.2","@storybook/react":"^5.0.5","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","chai":"^3.5.0","enzyme":"^2.2.0","eslint":"^5.15.3","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.12.4","git-url-parse":"^6.0.1","jsdom":"^9.5.0","mocha":"^5.2.0","prop-types":"^15.7.2","react":"^16.8.5","react-addons-test-utils":"^15.6.2","react-dom":"^16.8.5","sinon":"^1.17.6","standard-version":"^4.4.0","webpack":"^4.29.6","lottie-web":"^5.5.4"},"peerDependencies":{"react":"^0.14.7 || ^15.0.0 || ^16.0.0","lottie-web":"^5.5.4"},"dependencies":{"lottie-api":"github:bodymovin/lottie-api#master"},"main":"dist/index.js","engines":{"npm":"^3.0.0"},"gitHead":"1408f170638603a4d84885c007c10fbf57fa3d6e","bugs":{"url":"https://github.com/felippenardi/lottie-react-web/issues"},"homepage":"https://github.com/felippenardi/lottie-react-web#readme","_id":"@dreamfliper/lottie-light-react-web@2.1.15","_nodeVersion":"10.14.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ludhHDqFH0bUfgcZBjCB+ea5JHWVpFMVts8EV8f7M1L281YhcLerKzaBXoto5SROGoNavqJZ7zqDcaBVxO91Lg==","shasum":"df9166ad5765e7c1a874db5d6a959bfe997f8d56","tarball":"https://registry.npmjs.org/@dreamfliper/lottie-light-react-web/-/lottie-light-react-web-2.1.15.tgz","fileCount":27,"unpackedSize":352211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/f+YCRA9TVsSAnZWagAAlfQP/jTHGl3gQAwOTcpNsBM+\n5kTA+nzUuKPBBm/KSPKY7uF9MSjMPmE2uoSw82vsQUWtpo4bTF1ICh5pAuLs\najFa85LJ3n1I/Tc7MpXK+CVqz67RcgC6bAzNIDgaJKX7c7UjOIbAIvf/Oi02\nZRiwzon1DLhJk5ZQ5ZlGhPQAstdX+SPPeI3ab/skvdidWGtnb9JOgPiMneYI\nLMKvBqhfIIl3Uv89O9FoMygXxM3+tlecJNu3mETR042EcBBk7qwfBIrZdeg1\nlC35IJOSy9W1z++a/6vTMa6xyn0I2AjYxoYb2z15HLx4WbJyRAIT33KVxTNb\nVIfgg/XEI0ssa0B7rE0nk8uvBY/4XViVCNJtIUOVrYX2YgA1DL4R9iFixu4j\nFpvs/lgMfUXBi17vd3n4wbsJN437fCVUSAMwjXXDUprJMJKe1BzD8rGzOVv/\nRRiS0AKLGcImrleh1CTdjS1hkkHWDZ7B06idPjdgxT85S7jIgTZyYMaY6fom\n94UZdYp5iZ7G+Ni0dWy5gPe9vAdFcCuq5K819aSOge1tEQne8ZiNH9sFOsi2\ndVqj6lFQsnrB5zKyeQ3ivMlgwviWkdLde42DEyYzw7ndGOkGSLyNA5PkV7LY\nnW/npD+Fub02HmjI4GrIiTXuO7BdFShkiL2S99D0Ci7Juo1DA6Ye/OL3Ljqw\n1DwV\r\n=TZXt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVOqyUjTX0bpx6rAFeXVhKx+6xmhx9BwyqSTjIXQ2sWAiEAv7T72HgMI1I6tpvu3EhMhNGBxnK9uCRRXFtrHGalJto="}]},"maintainers":[{"name":"dreamfliper","email":"dreamfliper@gmail.com"}],"_npmUser":{"name":"dreamfliper","email":"dreamfliper@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-light-react-web_2.1.15_1560149912110_0.69387938017701"},"_hasShrinkwrap":false},"2.1.16":{"name":"@dreamfliper/lottie-light-react-web","version":"2.1.16","description":"Lottie-light wrapper for React on the web.","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":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/plugin-proposal-class-properties":"^7.4.0","@babel/plugin-transform-runtime":"^7.4.0","@babel/polyfill":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/register":"^7.4.0","@babel/runtime":"^7.4.2","@storybook/react":"^5.0.5","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","chai":"^3.5.0","enzyme":"^2.2.0","eslint":"^5.15.3","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.12.4","git-url-parse":"^6.0.1","jsdom":"^9.5.0","mocha":"^5.2.0","prop-types":"^15.7.2","react":"^16.8.5","react-addons-test-utils":"^15.6.2","react-dom":"^16.8.5","sinon":"^1.17.6","standard-version":"^4.4.0","webpack":"^4.29.6"},"peerDependencies":{"react":"^0.14.7 || ^15.0.0 || ^16.0.0"},"dependencies":{"lottie-api":"github:bodymovin/lottie-api#master","lottie-web":"^5.5.4"},"main":"dist/index.js","engines":{"npm":"^3.0.0"},"gitHead":"1408f170638603a4d84885c007c10fbf57fa3d6e","bugs":{"url":"https://github.com/felippenardi/lottie-react-web/issues"},"homepage":"https://github.com/felippenardi/lottie-react-web#readme","_id":"@dreamfliper/lottie-light-react-web@2.1.16","_nodeVersion":"10.14.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-QzlWhHOoI4kF38F+yZZu7EdsJv7W6qyy6EPduPyH3F+lqcmyqQAg0xPoofPce8I1T7qndEUDI593YOvGhm4HpA==","shasum":"cf116ebd2d704385166dba7941f24c484676490c","tarball":"https://registry.npmjs.org/@dreamfliper/lottie-light-react-web/-/lottie-light-react-web-2.1.16.tgz","fileCount":27,"unpackedSize":352183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/gTtCRA9TVsSAnZWagAAapgQAJFVSJd6ciOsAjWm5zfr\nZguGjqgy3QZiEYQ1ftECURyL+s2UtvpHnzWgnHI7uznKSPxVMbB1MIoL+W24\ndSrl4JSPFzoKcVf/RUnQ5xDfbDJa7ficujJeM1ckfgwMCy3DHLE23oaF7nuN\n4QZf5SZprj0LvT50nWmGSziwpP+1nmGA5aLaOUv9lVVCaM3zkFbRd9RvcMVi\njYYXH8K/2F8fYmkH05TbRkPbg/HKM+FnhZPghpflCZgsfgW46YBRpZ+1qtWg\nMDxgGDMI9RdkYwNbjTMh93SZtCha/0dvdKRx7XDNblVPZP4zdswW9XekyZXG\nYTg+KXOfQyQifmcwOTcVRqQxMwpf/Kb7kYnlHqlfMP2P/JQc2yW8Kxfn+bXl\nGNvD+eEBiuO4kC5o1565g33wjir/qVsaTZ+k8Vs8lvWuRU/R4QfEi795B0DJ\npLXF1zOXoqt5w79oLc6JChmjGajrBvJCzO3kJITl/6EL7yaXGwzxhFbf1d9o\ntbg1BGrtzTkDTzssLz7KvznakFZNtjy57ZZVCF1ZRfSk2PRifZJZ+GZ4mFJH\nNjvh1o3y+CKu5WjYap4Za131CTBlUT4vrxP9pVdA12i859wWXQcAeogxLJpO\n1v+xjHXtJnmRmYLLdr0eeGDWuR9nm9J6vpuLTah7uod/N/k1zV5UiUVlCWdR\nHwxx\r\n=2Onl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoUIBxJMITSsG/ZvzNH9Go4htBvIXJgZNZZwlwgXActAiEAxHGBwZAtFy4WSiNKwLZ8SEmhtGnDyoQIKM+QzRLD6SQ="}]},"maintainers":[{"name":"dreamfliper","email":"dreamfliper@gmail.com"}],"_npmUser":{"name":"dreamfliper","email":"dreamfliper@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-light-react-web_2.1.16_1560151277073_0.08654333304532513"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-10T06:58:32.083Z","2.1.15":"2019-06-10T06:58:32.295Z","modified":"2022-04-05T05:37:32.935Z","2.1.16":"2019-06-10T07:21:17.292Z"},"maintainers":[{"name":"dreamfliper","email":"dreamfliper@gmail.com"}],"description":"Lottie-light 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|**`forceSegment`**| 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\n| Prop | Description | Default |\n|---|---|---|\n|**`animationData`**| **Mandatory** - The source of the animation. | — |\n|**`loop`**| Play animation non-stop in a loop. | `true` |\n|**`autoplay`**| Automatically play animation when it is instantiated. | `true` |\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"}