{"_id":"@alexkirsz/react-content-loader","_rev":"2-3a077db314faee7b1767aafae46e3b70","name":"@alexkirsz/react-content-loader","dist-tags":{"latest":"3.5.1"},"versions":{"3.5.0":{"name":"@alexkirsz/react-content-loader","version":"3.5.0","description":"SVG component to create placeholder loading, like Facebook cards loading.","repository":{"type":"git","url":"git+https://github.com/danilowoz/react-content-loader.git"},"author":{"name":"Danilo Woznica","email":"danilowoz@gmail.com"},"license":"MIT","main":"dist/react-content-loader.cjs.js","module":"dist/react-content-loader.es.js","jsnext:main":"dist/react-content-loader.es.js","types":"dist/src/index.d.ts","bugs":{"url":"https://github.com/danilowoz/react-content-loader/issues"},"homepage":"https://github.com/danilowoz/react-content-loader","keywords":["react","facebook-style","loader","loading","content","svg"],"sideEffects":false,"scripts":{"dev":"docz dev","build":"rm -fr ./dist && rollup -c","test":"npm run tsc && jest","test:watch":"jest tests --watch","tsc":"tsc","tsc:watch":"npm run tsc -- --watch","commit":"git-cz","format":"prettier --write \"src/**/*.{ts,tsx}\"","coverage":"codecov","release":"semantic-release"},"devDependencies":{"@babel/core":"^7.1.2","@babel/polyfill":"^7.0.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","@babel/runtime":"^7.0.0","@commitlint/cli":"^7.5.0","@commitlint/config-conventional":"^7.5.0","@types/jest":"^23.3.10","@types/react":"^16.7.13","@types/react-dom":"^16.0.11","@types/react-test-renderer":"^16.0.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","commitizen":"^3.0.5","cz-conventional-changelog":"^2.1.0","docz":"^0.13.7","docz-theme-default":"^0.13.7","husky":"^1.1.2","jest":"^23.6.0","prettier":"^1.15.3","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.6.3","remark-emoji":"^2.0.2","rollup":"0.66.4","rollup-plugin-replace":"^2.0.0","rollup-plugin-typescript2":"^0.18.0","rollup-plugin-uglify":"^6.0.0","semantic-release":"^15.13.1","ts-jest":"^23.10.5","tslint":"^5.11.0","tslint-config-prettier":"^1.17.0","typescript":"^3.2.1"},"peerDependencies":{"react":"^15.0.0-0 || ^16.0.0-0"},"dependencies":{},"husky":{"hooks":{"pre-commit":"npm run format && npm run tsc","pre-push":"npm run test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"verbose":true,"collectCoverage":true,"coverageDirectory":"./coverage/","transform":{"^.+\\.(t|j)sx?$":"ts-jest"},"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$","roots":["/src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"]},"gitHead":"0cfabf9537cbfaaa007efd079717a7cfb5c5bb95","_id":"@alexkirsz/react-content-loader@3.5.0","_npmVersion":"6.5.0","_nodeVersion":"11.7.0","_npmUser":{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"},"dist":{"integrity":"sha512-gTMgWKoeW7uhNnwIIwpkg4udgAxVeluj0TwNqGgPv4z0BQgXOStpt6npfmJrycmdxdjgbboV0wNRqyjakjAnhQ==","shasum":"09b82a7a2cbd48b440ea3fe3a827846c5d0c4b7f","tarball":"https://registry.npmjs.org/@alexkirsz/react-content-loader/-/react-content-loader-3.5.0.tgz","fileCount":3,"unpackedSize":13122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfDFgCRA9TVsSAnZWagAAqV0QAINRPO/vvfl7Rj6yXPZI\nDPWNluYEm39DK2aTqYCNxXdI95oGokpZhRXhZ2vvDYjr0qnpgwg2DMDGyeWy\ny+//PnU4IEIthii4ZSzCiuj1HlG3fezo+Gsj9hDR6bjToCVMoIkCY3vzocoy\nLwi0m7rZS96OZm1WhCWpzznte6xMR/0ZoO1cZx9vXav4aWLziVh0tcCcxiiT\nGX/kAKtXIDgcSD+e/VTzwXvhHa418HrB7CsIW27Bus4hdN+rRQ3scaSxssco\nI/i2KeDGDNodLnzLXZHf95gE4gya+ElV3GyA5wndYhbEkD6JjAbxWOxBK7Vg\nTcqOIiWEAMQJ9y+zs9SS/+iH3EOZjFPEgisWclY+hLmWyqeRHvZCUNE+u+Q1\n4UmtfD1fmsXmJHX06X4Not3ZRxMbbIsbI/OupQJ1iR/ao3wdJVluKu6bGKsc\nEpR9AJb/wQHKFN1DJdAm2kkU1JDaGlQ4RKLNMZUOG+MASEKQtlPu8p39yS19\n1Yi9AH/aHY/6D5OKkZA2EYLAbjQE7l9SS8AX6+yzLM7wDr+hd00u2oL1sGrU\nQqPGXGv4093Dx+O+AeraLIntE/faYfr4UxmU/DRq8mJdbjiqi1U9h06xcw1m\n+Nn31SRGBezqRz/Q+5B2pOeb1DJ8hKOfQ/Kebp5vkR0YFq/ehfzZb5Mhpk6V\nCK8q\r\n=bRTQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuSdJif0KvbqUyNR11CyhQHBfSjulsmKyPZc0ocU8DAAiB8LvhZfsRdMl/xtYKSmXT34M+tski8WpTQexNiYl1oEg=="}]},"maintainers":[{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-content-loader_3.5.0_1551642976247_0.4535233829805052"},"_hasShrinkwrap":false},"3.5.1":{"name":"@alexkirsz/react-content-loader","version":"3.5.1","description":"SVG component to create placeholder loading, like Facebook cards loading.","repository":{"type":"git","url":"https://github.com/danilowoz/react-content-loader"},"author":{"name":"Danilo Woznica","email":"danilowoz@gmail.com"},"license":"MIT","main":"dist/react-content-loader.cjs.js","module":"dist/react-content-loader.es.js","jsnext:main":"dist/react-content-loader.es.js","types":"dist/src/index.d.ts","bugs":{"url":"https://github.com/danilowoz/react-content-loader/issues"},"homepage":"https://github.com/danilowoz/react-content-loader","keywords":["react","facebook-style","loader","loading","content","svg"],"sideEffects":false,"scripts":{"dev":"docz dev","build":"rm -fr ./dist && rollup -c","test":"npm run tsc && jest","test:watch":"jest tests --watch","tsc":"node_modules/.bin/tsc","tsc:watch":"npm run tsc -- --watch","commit":"git-cz","format":"prettier --write \"src/**/*.{ts,tsx}\"","coverage":"codecov","release":"semantic-release"},"devDependencies":{"@babel/core":"^7.1.2","@babel/polyfill":"^7.0.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","@babel/runtime":"^7.0.0","@commitlint/cli":"^7.5.0","@commitlint/config-conventional":"^7.5.0","@types/jest":"^23.3.10","@types/react":"^16.7.13","@types/react-dom":"^16.0.11","@types/react-test-renderer":"^16.0.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","commitizen":"^3.0.5","cz-conventional-changelog":"^2.1.0","docz":"^0.13.7","docz-theme-default":"^0.13.7","husky":"^1.1.2","jest":"^23.6.0","prettier":"^1.15.3","react":"^16.7.0","react-dom":"^16.7.0","react-test-renderer":"^16.6.3","remark-emoji":"^2.0.2","rollup":"0.66.4","rollup-plugin-replace":"^2.0.0","rollup-plugin-typescript2":"^0.18.0","rollup-plugin-uglify":"^6.0.0","semantic-release":"^15.13.1","ts-jest":"^23.10.5","tslint":"^5.11.0","tslint-config-prettier":"^1.17.0","typescript":"^3.2.1"},"peerDependencies":{"react":"^15.0.0-0 || ^16.0.0-0"},"dependencies":{},"husky":{"hooks":{"pre-commit":"npm run format && npm run tsc","pre-push":"npm run test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"verbose":true,"collectCoverage":true,"coverageDirectory":"./coverage/","transform":{"^.+\\.(t|j)sx?$":"ts-jest"},"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$","roots":["/src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"]},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Julian Ćwirko \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.","_id":"@alexkirsz/react-content-loader@3.5.1","dist":{"shasum":"b64d59b68898b0e687f08bcc868b61b4f6d70fa7","tarball":"https://registry.npmjs.org/@alexkirsz/react-content-loader/-/react-content-loader-3.5.1.tgz","integrity":"sha512-7AkQxHxMBN9mBN0H/WBUadqW/sULz6VYwvyzafHoaD9r5tVVlrdahq6sNfWjFRdQOltvkIGIm5IvGXimnZV9vw==","fileCount":58,"unpackedSize":52338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfDi6CRA9TVsSAnZWagAAm6IP/2SpqQxft/jgc01qPZmV\nSO+JyT5Y01jFdFUIh5769wiegDR78qvLHDISRRIsuzMTuaG5OFp7eNlUjSdx\n2k8ltWHHS/Kx58OtYqGcxqD/FJiSoPdMbPeM8iJBI2hddB8Ylnn1/eCeO4j2\nD2/Byu2eV0SqISetZa5h/yeY5+J3Oz73Quq6FIJWG8/JlyvZuoA/aazg9l8A\naE4oZOi0dTYy2hpWNKvh98uR+0g8fhwGe38anX4VBjxcPxc50zNsbX048Ncr\nZmvT/pLuxOqT0YSHfqgPoCCokxxN8E0eGOqAdNraBSqn65AusCxVMVIXi0Ro\nx3C2m6TTaEoCD9LblUqQna4yX6+7zDL1vebFmKCA5a5+q/2Ke3zwFz0Ve3a/\n60eXJG+GZC37Yn99TOmsYLqrXBjs7ZnvipAdYFGJsP3XqpMssHia/yurJNBH\nSJ/VRSn+bW85g4ZS4Qf6+ztXmbx52B3wBZdfxcG7e8m55NDMnhngewPVqKKF\n1mkcQN7nWIIYQFNbAw5DCk7OTRnpgQp3LqCqsgPtqFSPBkeOFqD3oNouQS19\nllCVY+tRDvL1063/WMGdjm3AvJKwbbQs4vRTGSa9f8sHHNB6JCb7bsmRlDkK\nUaGWOMDL66qDtQZsclr1pqKaDxT2bff++E2Q3h2nfgMB88RQcU21xM6XQoJJ\nKuCW\r\n=fTnq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHwmy1AjElo85oip5rkVI5aM9vZCUk//XBnfUVTpgVqMCIQCfudtXzoQa+Er6nruW+dFLj7VcuOdCCdOnN0nFGCZsww=="}]},"maintainers":[{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"}],"_npmUser":{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-content-loader_3.5.1_1551644857658_0.9362135837851129"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-03T19:56:16.015Z","3.5.0":"2019-03-03T19:56:16.403Z","modified":"2022-04-04T12:40:58.626Z","3.5.1":"2019-03-03T20:27:37.812Z"},"maintainers":[{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"}],"description":"SVG component to create placeholder loading, like Facebook cards loading.","homepage":"https://github.com/danilowoz/react-content-loader","keywords":["react","facebook-style","loader","loading","content","svg"],"repository":{"type":"git","url":"https://github.com/danilowoz/react-content-loader"},"author":{"name":"Danilo Woznica","email":"danilowoz@gmail.com"},"bugs":{"url":"https://github.com/danilowoz/react-content-loader/issues"},"license":"MIT","readme":"

\n \"react-content-loader\"\n

\n

\n \"Example's\n

\n\nSVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).\n\n## Features\n\n- :gear: **Customizable:** Feel free to change the colors, speed, sizes and even **RTL**;\n- :ok_hand: **Plug and play:** with many presets to use, see the [examples](#examples);\n- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create your own custom loaders easily;\n- ⚛️ **Lightweight:** only **1.4kB** gzipped and **0 dependencies**;\n\n## Index\n\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [Options](#options)\n- [Examples](#examples)\n- [Similar packages](#similar-packages)\n- [Development](#development)\n- [Known Issues](#known-issues)\n\n## Getting Started\n\n```sh\nnpm i react-content-loader --save\n```\n\n```sh\nyarn add react-content-loader\n```\n\nCDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)\n\n## Usage\n\nThere are two ways to use it:\n\n**1. Presets, see the [examples](#examples):**\n\n```jsx\nimport ContentLoader, { Facebook } from 'react-content-loader'\n\nconst MyLoader = () => \nconst MyFacebookLoader = () => \n```\n\n**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**\n\n```jsx\nconst MyLoader = () => (\n \n {/* Only SVG shapes */}\n \n \n \n \n)\n```\n\n**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)\n\n## Options\n\n**`animate?: boolean`**\n\nDefaults to `true`. Opt-out of animations with `false`\n\n**`ariaLabel? string | boolean`**\n\nDefaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.\n\n**`speed?: number`**\n\nDefaults to `2`. Animation speed in seconds.\n\n**`interval?: number`**\n\nDefaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.\n\n**`className? string`**\n\nDefaults to an empty string. The classname will be set in the `` element.\n\n**`width? number`**\n\nDefaults to `400`. It will be set in the viewbox attr in the ``.\n\n**`height? number`**\n\nDefaults to `130`. It will be set in the viewbox attr in the ``.\n\n**`gradientRatio? number`**\n\nDefaults to `2`. Width of the animated gradient as a fraction of the viewbox width.\n\n**`rtl? boolean`**\n\nDefaults to `false`. Content right-to-left.\n\n**`preserveAspectRatio?: string`**\n\nDefaults to `xMidYMid meet`. Aspect ratio option of ``. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/master/src/interface.ts#L7).\n\n**`primaryColor?: string`**\n\nDefaults to `#f3f3f3` which is used as background of animation.\n\n**`secondaryColor?: string`**\n\nDefaults to `#ecebeb` which is used as the placeholder/layer of animation.\n\n**`primaryOpacity?: string`**\n\nDefaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)\n\n**`secondaryOpacity?: string`**\n\nDefaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)\n\n**`stops?: Array<{ offset: number; color: string; opacity: number }>`**\n\nDefaults to a linear gradient with 3 evenly spaced stops for the colors primary, secondary, then primary again. If set, the values of `primaryColor`, `secondaryColor`, `primaryOpacity` and `secondaryOpacity` are ignored.\n\n**`style?: React.CSSProperties`**\n\nDefaults to an empty object.\n\n**`uniquekey?: string`**\n\nDefaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).\n\n## Examples\n\n##### Facebook Style\n\n```jsx\nimport { Facebook } from 'react-content-loader'\n\nconst MyFacebookLoader = () => \n```\n\n![Facebook Style](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)\n\n##### Instagram Style\n\n```jsx\nimport { Instagram } from 'react-content-loader'\n\nconst MyInstagramLoader = () => \n```\n\n![Instagram Style](https://cloud.githubusercontent.com/assets/4838076/22555637/749f9e26-e94b-11e6-84ff-83cd415c1eb9.gif)\n\n##### Code Style\n\n```jsx\nimport { Code } from 'react-content-loader'\n\nconst MyCodeLoader = () => \n```\n\n![Code Style](https://cloud.githubusercontent.com/assets/4838076/22555473/effa54c2-e94a-11e6-9128-9b608bcc69d9.gif)\n\n##### List Style\n\n```jsx\nimport { List } from 'react-content-loader'\n\nconst MyListLoader = () => \n```\n\n![List Style](https://user-images.githubusercontent.com/4838076/36352948-b8931430-149e-11e8-9f4b-3f00bc444a6d.gif)\n\n##### Bullet list Style\n\n```jsx\nimport { BulletList } from 'react-content-loader'\n\nconst MyBulletListLoader = () => \n```\n\n![Bullet list Style](https://user-images.githubusercontent.com/4838076/31998372-59817bac-b96e-11e7-8ef8-07f61670ee18.gif)\n\n### Custom Style\n\nFor the custom mode, use the\n[online tool](https://danilowoz.github.io/create-react-content-loader/).\n\n```jsx\nconst MyLoader = () => (\n \n {/* Only SVG shapes */}\n \n \n \n \n)\n```\n\n---\n\n![Custom](https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif)\n\n## Similar packages\n\n- [React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient);\n- [Preact](https://github.com/bonitasoft/preact-content-loader);\n- Vue.js: [vue-content-loading](https://github.com/LucasLeandro1204/vue-content-loading), [vue-content-loader](https://github.com/egoist/vue-content-loader);\n- Angular: [ngx-content-loading](https://github.com/Gbuomprisco/ngx-content-loading), [ngx-content-loader](https://github.com/NetanelBasal/ngx-content-loader).\n\n## Development\n\nFork the repo then clone it\n\n`$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader`\n\n`$ yarn`: Install the dependencies;\n\n`$ yarn build`: Build to production;\n\n`$ yarn dev`: Run the docz to see your changes;\n\n`$ yarn test`: Run all tests: type checking and unit tests;\n\n`$ yarn test:watch`: Watch unit tests;\n\n`$ yarn tsc`: Typescript checking;\n\n`$ yarn tsc:watch`: Typescript checking with watching;\n\n### Commit messages\n\nCommit messages should follow the [commit message convention](https://conventionalcommits.org/) so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or `npm run commit`) instead of git commit, which provides an interactive CLI for generating proper commit messages.\n\n## License\n\n[MIT](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE)\n\n## Known Issues\n\n##### **Alpha is not working: Safari / iOS**\n\nWhen using `rgba` as a `primaryColor` or `secondaryColor` value, [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using an `rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.\n\n```jsx\n{/* Opaque color in Safari and iOS */}\n\n\n```\n\n```\n{/_ Semi-transparent color in Safari and iOS _/}\n\n\n```\n\n##### **Black box in Safari / iOS (again)**\n\nUsing base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the **base-href** tag from the `` and issue solved.\n\n\"Black\n\nSee: [#93](https://github.com/danilowoz/react-content-loader/issues/93) / [109](https://github.com/danilowoz/react-content-loader/issues/109)\n","readmeFilename":"README.md"}