{"_id":"@bulletlogic/react-animated-bg","name":"@bulletlogic/react-animated-bg","dist-tags":{"latest":"1.3.0"},"versions":{"1.3.0":{"name":"@bulletlogic/react-animated-bg","version":"1.3.0","description":"Strongly customizable React component helping you make animated background.","main":"build/index.js","scripts":{"start":"NODE_ENV=production webpack --watch --mode development","lint":"eslint src/*","test":"jest","build":"webpack --mode production"},"author":{"name":"qmixi"},"repository":{"type":"git","url":"git+ssh://git@github.com/bulletlogic/react-animated-bg.git"},"license":"MIT","devDependencies":{"@babel/core":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0","babel-eslint":"^8.2.6","babel-loader":"^8.0.6","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.1","eslint-plugin-import":"^2.18.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","jest":"^24.9.0","webpack":"^4.39.2","webpack-cli":"^3.3.7"},"dependencies":{"prop-types":"^15.8.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^16.14.0 || 17.x || 18.x"},"keywords":["react","animated","animate","animation","background","background-color","images","img","bg","react-animated-bg","random","duration","color","transition"],"bugs":{"url":"https://github.com/qmixi/react-animated-bg/issues"},"homepage":"https://github.com/qmixi/react-animated-bg#readme","gitHead":"b57b81c88fabed972aad96d08f00d47bbc3e1c21","_id":"@bulletlogic/react-animated-bg@1.3.0","_nodeVersion":"16.13.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-L3MoGvrEP6lttnFeM7NqRwEw52/0wF/JPAWNe3duO62ivo7lgv3VFgqdQQySajtcVdQaz12g1/K+Mg94O2B4Rw==","shasum":"9710fc2ad132155378ba044f68f613c34a872d7a","tarball":"https://registry.npmjs.org/@bulletlogic/react-animated-bg/-/react-animated-bg-1.3.0.tgz","fileCount":13,"unpackedSize":70650,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAE7tGqiS0U+6thp6/m5TsDgEwHcfZGCA3oe2X7PpNP1AiA6tZ1XK0Zv0vC3D6+6iq4T073Sf5TKEeRFkEsBU78Jtg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUPOvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUgw/9Hbv95OTHHYoB064VPOHsTOJgySxAFQJQh8rAE92VcLVAr4En\r\nFfe5elc4yK8znNLpqydrkxTDx+5pA1WQLhwDTU8pb0EXfCMVoZU5HNO+jH0e\r\nBGyGuJ8TxAKsaIyCWoF03dB5soi8zie7PCt1gsZ+pEijVheuvMfUazpw6rjI\r\nBoPaJ8aXzYbyCEXWomfQGmlckTJme4Q3fDoxZFcniytKVyzt9q0oHPshfD7o\r\nTvbzjwYUPTodpsDptaQmK+q/3dR55Pzet+aFEvPikR/v7dvd58HOU3rVUFVH\r\nF7jodeMPSMyE4MUBzPP/7Wg7V9EsD7pPldCcxezVJhx9K4n2yRO/rNQ5dmt2\r\nY9NhyEAAB4BM1NGAnRp81lAVe9WUleeeFPscKG7fG6Cy/0IMNuzXEwZJT7Jc\r\n35BzD1g3fjCVrrRnpHg6evYsET8ZPRLSpiJ1PM9aOhZouvuhzjniGgU1LcU3\r\nQBgdJ+Ck4UTFJ9iqOpE4lNULOfAPce6jyhutphTuaR21MHKdj+0IS7BLQQkg\r\nv+8hYaVQ8s4widYrpziDq541J582K7vomyht+NrIk5W15X8HcXDR/cTn91am\r\ngwXdXn9ZN0ZyaS9xOtdP9ohngd2uMy4ams37j69msagRfXp0hQKv46JmXp8g\r\njheH2ZGB5RlPler01jlDanxnBC9bXp2H5lw=\r\n=6yNN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ayan4m1","email":"andrew@bulletlogic.com"},"directories":{},"maintainers":[{"name":"ayan4m1","email":"andrew@bulletlogic.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animated-bg_1.3.0_1649472431412_0.05065073214926796"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-09T02:47:11.340Z","1.3.0":"2022-04-09T02:47:11.619Z","modified":"2022-04-09T02:47:11.782Z"},"maintainers":[{"name":"ayan4m1","email":"andrew@bulletlogic.com"}],"description":"Strongly customizable React component helping you make animated background.","homepage":"https://github.com/qmixi/react-animated-bg#readme","keywords":["react","animated","animate","animation","background","background-color","images","img","bg","react-animated-bg","random","duration","color","transition"],"repository":{"type":"git","url":"git+ssh://git@github.com/bulletlogic/react-animated-bg.git"},"author":{"name":"qmixi"},"bugs":{"url":"https://github.com/qmixi/react-animated-bg/issues"},"license":"MIT","readme":"[![CircleCI](https://circleci.com/gh/qmixi/react-animated-bg.svg?style=svg)](https://circleci.com/gh/qmixi/react-animated-bg) [![Issues][issues-shield]][issues-url] [![npm](https://badgen.net/npm/dt/react-animated-bg)](https://www.npmjs.com/package/react-animated-bg) [![npm](https://badgen.net/npm/dm/react-animated-bg)](https://www.npmjs.com/package/react-animated-bg) [![MIT License][license-shield]][license-url]\n\n<br />\n<br />\n<br />\n<p align=\"center\">\n  <a href=\"https://github.com/qmixi/react-animated-bg\">\n    <img src=\"static/icon.png\" alt=\"Logo\" width=\"100\" height=\"100\">\n  </a>\n\n  <h2 align=\"center\">React Animated Bg</h2>\n\n  <p align=\"center\">\n    Strongly customizable React component helping you make animated background\n    <br />\n    <br />\n    <a href=\"https://codesandbox.io/s/eloquent-cherry-udky9\">View Demo</a>\n    ·\n    <a href=\"https://github.com/qmixi/react-animated-bg/issues\">Report Bug</a>\n    ·\n    <a href=\"https://github.com/qmixi/react-animated-bg/issues\">Request Feature</a>\n  </p>\n</p>\n<br />\n\n<!-- GETTING STARTED -->\n\n## Getting Started\n\nThis component has been built to help you create customizable animated background. You can provide a list of colors, decide how long each color should be visible, set animation timing and its type. Thanks to simple and intuitive API you can create really amazing effects.\n\n### Installation\n\nWith `npm`\n\n```sh\nnpm install --save react-animated-bg\n```\n\nOr with `yarn`\n\n```sh\nyarn add react-animated-bg\n```\n\n<!-- USAGE EXAMPLES -->\n\n## Usage\n\n### Basic usage\n\nThe very basic usage is to just wrap your content in `AnimatedBg`. This component requires only one parameter - array of an `colors`. Colors can be passed in `hex`, `rgba` or any other system which is accepted by `background` CSS property.\n\n```jsx\nimport React from \"react\";\nimport AnimatedBg from \"react-animated-bg\";\n\n// by default delay = 0 and duration = 0.2s\nconst Wrapper = () => (\n  <AnimatedBg colors={[\"red\", \"#ef4f03\", \"rgb(47, 53, 255)\"]}>\n    My element with animated BG\n  </AnimatedBg>\n);\n```\n\n### Set animation duration time and delay before the next animation starts\n\nYou can decide how long the duration of the animation will last. Furthermore, if you want the background to stay for some time before the next transition starts, you can set `delay` prop according to your needs. `duration` and `delay` take numeric value representing **seconds**.\n\n```jsx\nimport React from \"react\";\nimport AnimatedBg from \"react-animated-bg\";\n\nconst Wrapper = () => (\n  <AnimatedBg\n    colors={[\"red\", \"salmon\", \"gold\"]}\n    duration={0.5}\n    delay={4} // it will wait 4 seconds before next transition starts\n    timingFunction=\"ease-out\"\n    className=\"section-styles\"\n  >\n    <h2>Duration and Delay</h2>\n    <p>\n      Each color will be visible for 4 seconds and will change to another in\n      500ms\n    </p>\n  </AnimatedBg>\n);\n```\n\n### How the animation will behave?\n\nDecide how the animation should behave. To make it happen all you have to do is set `timingFunction` property. By default, it's `linear`. but you can pass here any option from the list below.\n\n> `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`\n\n```jsx\nimport React from \"react\";\nimport AnimatedBg from \"react-animated-bg\";\n\nconst Wrapper = () => (\n  <AnimatedBg\n    colors={[\"red\", \"salmon\", \"gold\"]}\n    duration={2}\n    timingFunction=\"ease-out\"\n    className=\"section-styles\"\n  >\n    <h2>ClassName and other props</h2>\n  </AnimatedBg>\n);\n```\n\n### Hoorah!! You can animate images too!\n\n> ⚠️ Animating images doesn't work on **Firefox** since the browser doesn't support the transition for background-image. ⚠️\n\nBecause under the hood CSS `background` property is updating, the `colors` prop array can contain everything which is supported by CSS eg. `url('image.jpg)`. However eg. `linear-gradient` can't be animated this way. The example you can find in the [demo](https://codesandbox.io/s/eloquent-cherry-udky9)\n> **Important:** Remember to wrap the images with the **url( )** formula.\n\n```jsx\nimport React from \"react\";\nimport AnimatedBg from \"react-animated-bg\";\n\nconst Wrapper = () => {\n  const imagesList = [\n    'url(\"https://images.dog.ceo/breeds/labrador/n02099712_3503.jpg\")',\n    'url(\"https://images.dog.ceo/breeds/labrador/n02099712_5844.jpg\")',\n    'url(\"https://images.dog.ceo/breeds/labrador/n02099712_5343.jpg\")',\n    'url(\"https://images.dog.ceo/breeds/labrador/n02099712_7481.jpg\")',\n    'url(\"https://images.dog.ceo/breeds/labrador/n02099712_7414.jpg\")'\n  ];\n\n  return (\n    <AnimatedBg\n      colors={imagesList}\n      duration={2}\n      delay={1}\n      timingFunction=\"ease-out\"\n    >\n      <div className=\"App\">\n        <h1>Animated images</h1>\n        <h3>- duration: 2s</h3>\n        <h3>- delay: 1s</h3>\n        <h3>- transition type: ease-out</h3>\n      </div>\n    </AnimatedBg>\n  );\n};\n```\n\n### Choose the next background randomly\n\nBy default the background is changed according to the order given in the `colors` array. If you want you can change it to the random ordering by adding `randomMode` prop.\n\n```jsx\nimport React from \"react\";\nimport AnimatedBg from \"react-animated-bg\";\n\nconst Wrapper = () => (\n  <AnimatedBg\n    colors={[\"pink\", \"green\", \"black\"]}\n    duration={5}\n    delay={1}\n    timingFunction=\"linear\"\n    randomMode\n  >\n    <h2>Random mode</h2>\n    <p>Next background will be choosen randomly.</p>\n  </AnimatedBg>\n);\n```\n\n## This component takes following props\n\n| Prop name      | Type                                                                                      | Required | Default value | Description                                                                                                         |\n| -------------- | ----------------------------------------------------------------------------------------- | -------- |  -------- |  ------------------------------------------------------------------------------------------------------------------- |\n| className      | string                                                                                    | false    | -    | The class name provided to the component. It takes CSS modules as well.                                             |\n| colors         | array of colors/images                                                                           | true     | -    | Colors can be passed in a `hex`, `rgba` or any other system which is accepted by `background` CSS property.         |\n| delay          | number (seconds)                                                                          | false    | **0**    |  It tells how long the current background should be displayed before it changes to the next one. |\n| duration       | number (seconds)                                                                          | false    |  **0.2**    | It says how long the animation between one background and the other should last.              |\n| timingFunction | string (`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`) | false    | **linear**    | Defines how the transition between one background and another should behave.               |\n| randomMode     | boolean                                                                         | false    | **false**    |  If you set it to true next color will be choosen randomly.                                  |\n\n<!-- LICENSE -->\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n<!-- CONTACT -->\n\n## Contact\n\n#### Author: [@qmixi](https://github.com/qmixi)\n\n#### Project Link: [https://github.com/qmixi/react-animated-bg](https://github.com/qmixi/react-animated-bg)\n\n#### Demo: [https://codesandbox.io/s/eloquent-cherry-udky9](https://codesandbox.io/s/eloquent-cherry-udky9)\n\n[forks-shield]: https://img.shields.io/github/forks/qmixi/react-animated-bg.svg?style=flat-square\n[forks-url]: https://github.com/qmixi/react-animated-bg/network/members\n[issues-shield]: https://img.shields.io/github/issues/qmixi/react-animated-bg.svg?style=flat-square\n[issues-url]: https://github.com/qmixi/react-animated-bg/issues\n[license-shield]: https://img.shields.io/github/license/qmixi/react-animated-bg.svg?style=flat-square\n[license-url]: https://github.com/qmixi/react-animated-bg/blob/master/LICENSE.txt\n","readmeFilename":"README.md"}