{"_id":"@alfonmga/react-lottie-light-ts","_rev":"1-289b60c616cc4376d0390e068a922fbc","name":"@alfonmga/react-lottie-light-ts","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@alfonmga/react-lottie-light-ts","version":"0.0.1","main":"dist/index.cjs.js","module":"dist/index.esm.js","private":false,"repository":{"url":"git+https://github.com/alfonmga/react-lottie-light-ts.git","type":"git"},"license":"MIT","types":"dist/index.d.ts","devDependencies":{"@types/react":"16.8.25","@types/react-dom":"16.8.5","@typescript-eslint/eslint-plugin":"2.0.0","@typescript-eslint/parser":"2.0.0","concurrently":"4.1.1","eslint":"6.2.0","eslint-config-prettier":"6.0.0","eslint-plugin-prettier":"3.1.0","eslint-plugin-react":"7.14.3","prepend-file":"1.3.1","prettier":"1.18.2","rollup":"1.19.4","rollup-plugin-typescript2":"0.22.1","ts-node":"8.3.0","tslib":"1.10.0","typescript":"3.5.3"},"peerDependencies":{"react":"~16.9.0","react-dom":"~16.9.0"},"scripts":{"start":"concurrently --kill-others \"npm run build-watch\" \"npm run start-example\"","gh-pages-deploy":"cd example && npm run deploy","build":"rollup -c","build-watch":"rollup -c -w","install-all":"npm i && cd example && npm i","start-example":"cd example && npm start","test:lint":"eslint ./src/**/*.ts ./src/**/*.tsx ./example/src/**/*.ts ./example/src/**/*.tsx","test:lint:fix":"npm run test:lint -- --fix"},"dependencies":{"lottie-web":"5.5.9"},"keywords":["react","lottie","lottie-web","react-lottie","animation","bodymovin","canvas","svg","after effects","typescript"],"description":"React/Typescript wrapper for awesome Airbnb's [lottie-web](https://github.com/airbnb/lottie-web) lib.","bugs":{"url":"https://github.com/alfonmga/react-lottie-light-ts/issues"},"homepage":"https://github.com/alfonmga/react-lottie-light-ts#readme","directories":{"example":"example","test":"test"},"author":"","gitHead":"17d4852ff39c32bdd6bf39f73c7e970c9563d675","_id":"@alfonmga/react-lottie-light-ts@0.0.1","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-rdSuaCyWZ2Tq/UR9w3kkrTSoQCcUJjf/jSG2RNEL8615T1pgMk92kKJOxY0Y3rmuWj5Nn8S7/IQ4mDTNWXCjgQ==","shasum":"06f99ba72c0b9d148004d7261893e909dd786d45","tarball":"https://registry.npmjs.org/@alfonmga/react-lottie-light-ts/-/react-lottie-light-ts-0.0.1.tgz","fileCount":8,"unpackedSize":21309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH7CYCRA9TVsSAnZWagAACOYP/0WyyRTKt2kB/6Hd1IF8\nhNJSGeEnHUakPGFUJV9dtKVZx8GUrs7Li4W19T2k9N52aGitb2Je7PWqlvYJ\ntmzqzN8YJ/iVkhtFyf+rCSHwdZY63YAewQe2kRdK6zl/mt1xSi8o64FpFE5K\n1KauglBRnQhW12PXkUp+hVrKzZP4wO5Grdmc/4pEpySk3FVqsQoU/mkJINCS\nXpzQlF33q16ccnLXdFZmlESV8XMncFRDcF8QZpw4Gqp8YQfX9kG4tuur3P6w\nz8SMZQFLm4OV2Q6e9GeUB1uWcrQNUSloAzLvjmI2ytPji8YIa19Kzo/+KtHJ\n8XGDW6MiHPXjqPjd1IphIf+G3HYS69JkLrTI6sgjU5G11oIZusLWG4yb80HO\nwtQ4w9s/+/t9AsXaoufNsPaiI8nD7XuUqvHwMat+esm/INmWVbZFcKZrk831\nwrhuZjjA3evn1GP6FE8ftUR8sO1fLP2lKfZ5xAe76ou7psXEP/Ni9xRv5i6Q\n37rT0WTtaAR4fJ+eHTqJea3CRqmm3g2ADtOamTbxo4Zcsswm9bmbIpVG9iQ8\nQ/fj6SOd1ev5FDLeRgNztlYix9k0gxYtWOrZJGH+Uci7ZaBmsKPw7HwFdW/E\nid0FeT6QDdNMS5yF2doTJhjh7qqsH1J+IRPzXg4+6rzKCszD98GqkiDtRB0W\nIfwX\r\n=K9In\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9uMBWOxJQCQYiAcBzPoFBwrARhgXBWzidoDVFNkOXEQIhAPCw9DCqgd5xPm6RpAUmGkYmvzPzKPGrTwRvxxAquydW"}]},"maintainers":[{"name":"alfonmga","email":"me@alfon.io"}],"_npmUser":{"name":"alfonmga","email":"me@alfon.io"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lottie-light-ts_0.0.1_1579135128327_0.8128148220057889"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-16T00:38:48.286Z","0.0.1":"2020-01-16T00:38:48.522Z","modified":"2022-04-04T12:49:08.167Z"},"maintainers":[{"name":"alfonmga","email":"me@alfon.io"}],"description":"React/Typescript wrapper for awesome Airbnb's [lottie-web](https://github.com/airbnb/lottie-web) lib.","homepage":"https://github.com/alfonmga/react-lottie-light-ts#readme","keywords":["react","lottie","lottie-web","react-lottie","animation","bodymovin","canvas","svg","after effects","typescript"],"repository":{"url":"git+https://github.com/alfonmga/react-lottie-light-ts.git","type":"git"},"bugs":{"url":"https://github.com/alfonmga/react-lottie-light-ts/issues"},"license":"MIT","readme":"# @crello/react-lottie\n\nReact/Typescript wrapper for awesome Airbnb's [lottie-web](https://github.com/airbnb/lottie-web) lib.\n\n## Demo \n[https://crello.github.io/react-lottie/](https://crello.github.io/react-lottie/)\n\nyou can find demo files in `./examples` folder -- launch with `yarn start`\n\n## Installation\n`yarn add @crello/react-lottie` or `npm install --save @crello/react-lottie`\n\n## Usage\nMost basic react-lottie example:\n```typescript\nimport React from 'react';\nimport { Lottie } from '@crello/react-lottie'\nimport animationData from './myAwesomeAnimation.json'\n\nexport const BasicLottieComponent = () => <Lottie config={{animationData: animationData}}>\n```\n\nLottie component creates `<div>` and passes it to lottie config as the `container` param. This div contains renderer's output of choosen type: `'svg'| 'html' | 'canvas'`. `<Lottie>` accepts `style` and `className` props that will apply to the `container`. \n\nAny browser events should be added on elements wrapping actual `<Lottie>` e.g.:\n```html\n<div onClick={..}>\n    <Lottie/>\n<div>\n```\n\n## Params\n\n### Props\n```typescript\n{\n  height?: string - valid css value e.g. '100px' [default: `100%`],\n  width?: string - valid css value e.g. '100px' [default: `100%`],\n  playingState?: 'playing' | 'stopped' | 'paused' [default: `playing`],\n  segments?: AnimationSegment | AnimationSegment[],\n  speed?: number - animation playback speed [default: `1`],\n  style?: styles passed to lottie container,\n  direction?: AnimationDirection - [default: `1`],\n  lottieEventListeners?: ReactLottieEvent[] - see available events in AnimationEventName from 'lottie-web',\n  config: ReactLottieConfig - config with mandatory `path` or `animationData`,\n}\n```\n\n### Config\n```typescript\n{\n  animationData: any - an Object with the exported animation data,\n  path: string - remote data,\n  renderer?: 'svg' | 'canvas' | 'html' - choose renderer [default: `svg`],\n  loop?: boolean | number - loop boolean or count [default: `false`],\n  autoplay?: boolean - it will start playing as soon as it is ready [default: `true`],\n  name?: string - animation name for future reference,\n  rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig,\n}\n```\n\n## More\n\nSee more details in @crello/react-lottie [exports](https://github.com/crello/react-lottie/blob/master/src/components/Lottie/interface.ts): `Lottie`, `ReactLottieConfig`, `ReactLottieOwnProps`, `ReactLottiePlayingState`\n\nAlso check out the types provided by [`lottie-web`](https://github.com/airbnb/lottie-web/blob/master/index.d.ts) itself: `AnimationDirection`, `AnimationSegment`, `AnimationEventName`, `AnimationEventCallback`, `AnimationItem`, `BaseRendererConfig`, `SVGRendererConfig`, `CanvasRendererConfig`, `HTMLRendererConfig`, `AnimationConfig`, `AnimationConfigWithPath`, `AnimationConfigWithData`, `Lottie`\n\nMore lottie animations you can find on [lottiefiles](https://www.lottiefiles.com/)\n\n## License\nMIT\n","readmeFilename":"README.md"}