{"_id":"@am0nshi/react-preloaders","_rev":"1-f43554240fefa13d8ef133a377daad8e","name":"@am0nshi/react-preloaders","dist-tags":{"latest":"3.0.3"},"versions":{"3.0.3":{"name":"@am0nshi/react-preloaders","version":"3.0.3","description":"🌌Package for adding preloaders to your React apps","main":"./lib/index.js","module":"./lib/index.js","author":{"name":"Gegham Samvelyan","url":"VamOSGS"},"license":"MIT","scripts":{"deploy":"cd ./demo && yarn deploy","build":"webpack","build:dev":"webpack --watch","start:demo":"cd ./demo && yarn start","lint":"eslint src","lint_fix":"eslint src --fix","test":"jest","build:exp":"rm -rf lib && cross-env NODE_ENV=production ./node_modules/.bin/babel src/ --out-dir lib --ignore ./src/__test__","prepare":"npm run build"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupFiles":["./src/setupTests.js"]},"repository":{"type":"git","url":"git+https://github.com/am0nshi/react-preloaders.git"},"keywords":["react","react-preloaders","react-preloader","preloader-package","preload","preloader","loader","react-component"],"dependencies":{"prop-types":"^15.7.2","react":"^16.8.6","styled-components":"^5.0.0-beta.0"},"homepage":"https://vamosgs.github.io/react-preloaders/","devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/preset-env":"^7.4.5","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.6","babel-preset-react":"^6.24.1","cross-env":"^5.2.0","enzyme":"^3.10.0","enzyme-adapter-react-16":"^1.14.0","enzyme-to-json":"^3.3.5","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jest":"^22.6.4","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.11.0","jest":"^24.8.0","webpack":"^4.33.0","webpack-cli":"^3.3.4"},"bugs":{"url":"https://github.com/am0nshi/react-preloaders/issues"},"directories":{"example":"examples","lib":"lib"},"gitHead":"65497262a3f09be42bed82a1ad4942fc3e119fce","_id":"@am0nshi/react-preloaders@3.0.3","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-BTCZoj9FR8UrfSAgp1I6ToRAai6Ch3H5QOYOAzQM7D8RfciGkDJZK3lZQUPPfZwYdat7nb8R841DNttubkp/+g==","shasum":"83deb2b810cf47dc2ae66ea1dcc09a3ff3cf848e","tarball":"https://registry.npmjs.org/@am0nshi/react-preloaders/-/react-preloaders-3.0.3.tgz","fileCount":46,"unpackedSize":94091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMq+CCRA9TVsSAnZWagAA9YwP/3bqMQkyWj0LkV5qQHYQ\nNPSrSTP94tPL3zR/GYbUcILBkzZ/Vg2ZXKUqYH9nihTxVu6/79sQ3COlSJ0Y\no+TEwuURorD8UIRnz2rVv2reynZiRqTX+F7z1iRY2uYGTLoK6788017jpQGg\n4ljpiMnCVLZcAhsecmgHLwbshxABB7uaJv44icXXOhjXb5K5UIHS5uFxZo2c\njocxbClkt6jfGSrgiB3m6av5MdjbZxj7Zx8ypYH3/tBV8fkclmg2OPoxOFl3\nU/1EMiubTfn56Ph7JInstHQNBBBwnR+CEisUtRvEzrVIxvvCeP6ju/nYLhZG\nrUzSYvxLvuIoBD1qka5ZS0T7k2ZtmeFjIcpHU/G1XVxHRi+niemKU0AnsJQL\niIbTsBiW7LDPJtFx+P71PCo49jnqaFaxDPF1v30JXV7OCi9gLbZ8ViKsMVsK\nz7MvNZVV9afv3Hs0JP9T6qVyKWNXHTZOt3QPZA2gAAYH0HYn37avEQ6gshFg\nQXcFXI50D8E0ZABDYPdDNCAzpI2YLv95sTPL4LwZII6YMNs5D/GAWfW3O5tJ\n9FJSy8uUXZKxplNAja89sGn+QCf55Ule6t5L6CiHG43EuWMka0cAcP9WE+gG\npwrHOy0i8+XLtOTqsgSN5Bi9Gz7Y8qVJ7WifiZuCHmbC/CsJZPZivZuPhc/i\nMRvG\r\n=jIo6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtpbNVBZjE35AiR7Grx59KRJnocG17y1pzt8RaMAQqTAiEA8CtA5m52EoQZ7bNcUjpFM/ijLAuwhRNagSSfS2YpFFs="}]},"_npmUser":{"name":"galaevnik","email":"galaevnik@yandex.ru"},"maintainers":[{"name":"galaevnik","email":"galaevnik@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-preloaders_3.0.3_1630711682090_0.4426142194461107"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-03T23:28:02.042Z","3.0.3":"2021-09-03T23:28:02.248Z","modified":"2022-04-04T13:42:30.411Z"},"maintainers":[{"name":"galaevnik","email":"galaevnik@yandex.ru"}],"description":"🌌Package for adding preloaders to your React apps","homepage":"https://vamosgs.github.io/react-preloaders/","keywords":["react","react-preloaders","react-preloader","preloader-package","preload","preloader","loader","react-component"],"repository":{"type":"git","url":"git+https://github.com/am0nshi/react-preloaders.git"},"author":{"name":"Gegham Samvelyan","url":"VamOSGS"},"bugs":{"url":"https://github.com/am0nshi/react-preloaders/issues"},"license":"MIT","readme":"## React Preloaders\n\n![React Preloaders](https://raw.githubusercontent.com/VamOSGS/react-preloaders/development/assets/react-preloaders-card.jpg)\n\n![npm](https://img.shields.io/npm/v/react-preloaders.svg?style=flat-square)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-preloaders.svg?style=flat-square)\n![Travis (.org) branch](https://img.shields.io/travis/vamosgs/react-preloaders/development.svg?style=flat-square)\n[![npm downloads](https://img.shields.io/npm/dm/react-preloaders.svg?style=flat-square)](https://www.npmjs.org/package/react-preloaders)\n![NPM](https://img.shields.io/npm/l/react-preloaders.svg?style=flat-square)\n#### [vamosgs.github.io/react-preloaders](https://vamosgs.github.io/react-preloaders/)\n\n### Setup\n\nInstall it:\n\n```bash\nnpm install react-preloaders --save\n```\n\nor\n\n```bash\nyarn add react-preloaders --save\n```\n\n### Get Started\n\n#### find full preloaders list [here](https://vamosgs.github.io/react-preloaders/).\n\n### Simplest way\n\n```jsx\nimport React from 'react';\nimport { Lines } from 'react-preloaders';\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n```\n### Your components as preloader\nHere is example how you can use your components as prelaoder:\n\n```jsx\nimport React from 'react';\nimport { CustomPreloader } from 'react-preloaders';\n\nfunction App() {\n return (\n \n \n \n YOUR CUSTOM PRELOADER COMPONENT\n \n \n );\n}\n```\n\n### Properties (Props)\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ProptypeDefault value
colorString(hex, rgb,...)#2D2D2D
backgroundString(blur, gradient...)#F7F7F7
timeNumber(Milliseconds)1300ms
animationString(fade, slide...)fade
customLoadingBooleanundefined
\n\n## color (String)\n\nColor (hex, rgb, rgba) defines preloaders main color.\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n;\n```\n\n## background (String)\n\nBackground can be just color (hex, rgb), gradient or blured.\nFor just colored background pass color(hex, rgb, rgba).\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n```\n\nFor gradient background pass your gradient.\n\nYou can generate gradients [here](https://cssgradient.io/).\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n```\n\nFor blured background just pass blur.(it's now in beta)\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n```\n\n## time (Number)\n\nTime defines how long you want show preloader after page loaded.\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n```\n\n### If your are using [customLoading](#customLoading) and you don't want play preloader if your loading status false you need to pass time 0\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n```\n\n## animation (String)\n\nNow you can choose preloader closing animation, in this version available just 2 animations fade and slide.\nBy default preloader will close with fade animation.\n\n#### For slide animation you can choose direction.\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n;\n;\n;\n;\n```\n\n## customLoading (Boolean)\n\nIf in your app somthing loads async you can use preloaders too. For customLoading you need to pass your loading status.\n\n```jsx\nimport React, { Component } from 'react';\nimport { Lines } from 'react-preloaders';\n\nclass App {\n constructor() {\n state = {\n loading: true\n };\n }\n componentDidMount() {\n fetch('https://jsonplaceholder.typicode.com/todos/1')\n .then(response => response.json())\n .then(json => {\n setState({ loading: false });\n })\n .catch(err => {\n setState({ loading: false });\n });\n }\n render() {\n return (\n \n \n \n \n );\n }\n}\n```\n\n### Example with hooks\n\n```jsx\nimport React, { useState, useEffect } from 'react';\nimport { Lines } from 'react-preloaders';\n\nfunction App() {\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetch('https://jsonplaceholder.typicode.com/todos/1')\n .then(response => response.json())\n .then(json => {\n setLoading(false);\n })\n .catch(err => {\n setLoading(false);\n });\n }, []);\n\n return (\n \n \n \n \n );\n}\n```\n\n#### CSS loading (under v3.x.x) methods for old versions\n\nPackages you need\n\n```bash\nstyle-loader css-loader\n```\n\nmore if you want to extract css you need\n\n#### Extract ( webpack 3.x )\n\n```bash\nextract-text-webpack-plugin\n```\n\n#### Extract ( webpack 4.x )\n\n```bash\nmini-css-extract-plugin\n```\n\n#### Add this to your webpack if you don't have css loader yet\n\n```js\n{\n test: /\\.css$/,\n use: [ 'style-loader', 'css-loader' ]\n}\n```\n\n#### Extract ( webpack 3.x )\n\n```js\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\nconst extractCSS = new ExtractTextPlugin('style.[hash].css');\n\nmodule.exports = {\n plugins: [extractCSS],\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: extractCSS.extract(['css-loader', 'postcss-loader'])\n }\n ]\n }\n};\n```\n\n#### Extract ( webpack 4.x )\n\n```js\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nmodule.exports = {\n plugins: [\n new MiniCssExtractPlugin({\n // Options similar to the same options in webpackOptions.output\n // both options are optional\n filename: '[name].css',\n chunkFilename: '[id].css'\n })\n ],\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n options: {\n // you can specify a publicPath here\n // by default it use publicPath in webpackOptions.output\n publicPath: '../'\n }\n },\n 'css-loader'\n ]\n }\n ]\n }\n};\n```\n","readmeFilename":"README.MD"}