{"_id":"@agney/react-loading","_rev":"2-f457e676e63c491ab04680c68e596ae8","name":"@agney/react-loading","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@agney/react-loading","version":"0.1.1","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","sideEffects":false,"engines":{"node":">=10"},"author":{"name":"Boy with Silver Wings","email":"agney@outlook.in"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","release":"np","postrelease":"gh-pages -d example/dist"},"peerDependencies":{"react":">=16"},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"module":"dist/react-loading.esm.js","size-limit":[{"path":"dist/react-loading.cjs.production.min.js","limit":"10 KB"},{"path":"dist/react-loading.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.11.6","@size-limit/preset-small-lib":"^4.6.0","@svgr/rollup":"^5.4.0","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.0.4","@testing-library/react-hooks":"^3.4.2","@types/react":"^16.9.49","@types/react-dom":"^16.9.8","babel-loader":"^8.1.0","gh-pages":"^3.1.0","husky":"^4.3.0","lint-staged":"^10.4.0","np":"^6.5.0","prettier":"^2.1.2","react":"^16.13.1","react-dom":"^16.13.1","react-is":"^16.13.1","react-test-renderer":"^16.13.1","size-limit":"^4.6.0","tsdx":"^0.14.0","tslib":"^2.0.1","typescript":"^4.0.3"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,css,md}":"prettier --write"},"dependencies":{"tiny-invariant":"^1.1.0"},"publishConfig":{"access":"public"},"jest":{"globals":{"__DEV__":"boolean"},"collectCoverageFrom":["src/**/*.{ts,tsx}"],"moduleNameMapper":{"\\.(svg)$":"/__mocks__/fileMock.js"}},"gitHead":"8b63c188026892c30f27e4215ac6a19ca6eca46d","description":"## Installation","_id":"@agney/react-loading@0.1.1","_nodeVersion":"13.11.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-J9OkRVYcQ6IUY9Um/CS1NQFzuPeGsJndARd0AlaZV2OZgKB+S2Wjq9zqjjWR/nXHIN54ygsuN0uXMT3D1c1w0Q==","shasum":"1f165a688acf26993bc4b77704b352b109db36a3","tarball":"https://registry.npmjs.org/@agney/react-loading/-/react-loading-0.1.1.tgz","fileCount":32,"unpackedSize":124859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeZzYCRA9TVsSAnZWagAA9e8P/2vLYvEosWpdu7uGlevJ\nZ+RUghS8krNo4Bh8jBGmQ9Kiym7EQO2eW3rVicCKkcsX9Tl0ane7BhnY+g5B\nYrY3cY5x7uz1AQTlimFkR8JMiuWAQrnWosn+V9t9WIhuUCqTtEgzNM0+6QhV\nHw89ygOYqXqJ5FO4kmKCMXQw+OvRWyPCoLoUKZXl00JdzgSBzaa9Fz3BaqG1\nA5eFmdWT1mvLFpULpZOSXbiKLmrdgLio1SyXOTepROj/pGuCLSO/IjA+S4E7\nC57KH//NYKvm0GR0q85V2y/QgR6ehLpIH8p4YKwiw6GIRg1EQZeWSMCCxTq1\n1OzbtNcwtT6+r+xISmOLSErri2boe+p02Ux0DsfKO17fAAzx8kjcAIgMtVdY\nCEZGj7oEoLU5ISE7JqOyaGivncxye3EFZtgJSLjLquJW0fbSVg6PjXdqTogh\nljw3Fcsw3UtdWIlc3KfTrqz59HQq456Av5ptSHlDSmgbZZUpZ8V0RYWbE03O\nqFg8HlTp2D5PxF4XW2XyNpUEYOZs+kjPAltJle7ZJL70hvjSrcsl4JPQeQKc\nyZdZsFL6N8hGYa0AtViyH18QIjqddKVCZjqNdTdIFx3gN0VPOXOOxNpubRRz\nmBfPLzCY/yTSXKPhPbbVdQIxUhXXztYuuo7/7pwjgPjri8viLE17w67kYvRP\n+3Ym\r\n=PjYQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICm6t7tk+y4dwMhH8naeJeFyaj1CmpIUAxG1nlSVKoGmAiA6wL1r8fnjPpaw9rw6BvQW9hv822Q3VNXOrLQusq7b2Q=="}]},"maintainers":[{"name":"agney","email":"agney@outlook.in"}],"_npmUser":{"name":"agney","email":"agney@outlook.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-loading_0.1.1_1601805527881_0.18259564429511932"},"_hasShrinkwrap":false},"0.1.2":{"name":"@agney/react-loading","version":"0.1.2","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","sideEffects":false,"engines":{"node":">=10"},"author":{"name":"Boy with Silver Wings","email":"agney@outlook.in"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","release":"np","postrelease":"gh-pages -d example/dist"},"peerDependencies":{"react":">=16"},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"module":"dist/react-loading.esm.js","size-limit":[{"path":"dist/react-loading.cjs.production.min.js","limit":"10 KB"},{"path":"dist/react-loading.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.11.6","@size-limit/preset-small-lib":"^4.6.0","@svgr/rollup":"^5.4.0","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.0.4","@testing-library/react-hooks":"^3.4.2","@types/react":"^16.9.49","@types/react-dom":"^16.9.8","babel-loader":"^8.1.0","gh-pages":"^3.1.0","husky":"^4.3.0","lint-staged":"^10.4.0","np":"^6.5.0","prettier":"^2.1.2","react":"^16.13.1","react-dom":"^16.13.1","react-is":"^16.13.1","react-test-renderer":"^16.13.1","size-limit":"^4.6.0","tsdx":"^0.14.0","tslib":"^2.0.1","typescript":"^4.0.3"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,css,md}":"prettier --write"},"dependencies":{"tiny-invariant":"^1.1.0"},"publishConfig":{"access":"public"},"jest":{"globals":{"__DEV__":"boolean"},"collectCoverageFrom":["src/**/*.{ts,tsx}"],"moduleNameMapper":{"\\.(svg)$":"/__mocks__/fileMock.js"}},"repository":{"type":"git","url":"git+https://github.com/agneym/react-loading.git"},"keywords":["react","typescript","loader","spinner"],"bugs":{"url":"https://github.com/agneym/react-loading/issues"},"homepage":"https://agneym.github.io/react-loading/","gitHead":"25ccac8506ad04d57b5ba15da6799a6cfc34281c","description":"

React Loading

Simple and Accessible loading indicators with React.

","_id":"@agney/react-loading@0.1.2","_nodeVersion":"13.11.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-kkMpNtdGPfkPXoJQyulJsiapgdbZA0AkMEMOoVYE+10hC151Lvzdjpmg5EITxw+HTNkZ6yGa2EScI+lU/I9UgQ==","shasum":"2bcc72b3b3f1e684a2ead05ce834db00a259e1c1","tarball":"https://registry.npmjs.org/@agney/react-loading/-/react-loading-0.1.2.tgz","fileCount":32,"unpackedSize":130405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfegCDCRA9TVsSAnZWagAAmQEP/iC321i2fnmSN7Xek73Y\nf1wgvbeyF5lRksKiWxcrH1mjas8r0vmsSRUHXMyavuNmNOBwYKefopJL9dna\nfrlkLGLjUmtlInOP3R2otm7912I91pN308EcLUVw/2LPqgb2TgwIRpwB26y5\n9r8JosijLkt1daLmpJZ/S8g6nd4r6dTWr9yzd2mIlhQkKsJrdAVElBdLp92A\nUsLpnMtrW1QRPPqaec8WlubrdY6bxdYoSW550X7C6K6ql35BQ1eVzsvpwh67\ns/rXW/AnFEqHIlL+JtIOvd6950O9DtqxI1RPv4K3w4pBwfG6tX++k26QSmLP\nUU/jZURXXTn9ZGDEXs0Olz5nLfgJWgalBO4uerQseXuXDwamzRzme8PaPUfz\ntB/Czq41cOX8FkDY+ohE6ny6es4BwupfVitxzG4kyW092nkEPTHs3EHNbJhZ\nrwY/PWuDrM/wAXtM4JP0bToU2+wamo5beSzyo3kj0CV+u95xEPj2cTQo8PZ6\nZCZbL3zsfPZHPS9FI9eLoGTEVnMpWA+STa1I0suMa81QgylKsij7vduV/Te+\nPHDoUu7WS7vyotyMGBOr4Y87MNzfJiFlj5+P4ctAl1iXxpHxpSw36Ld5io8z\nNApOrHUNzJP2Cv3fPHbvXwkk/eNSwsZHD8TEhTUKhdSZ1tqPOQ1AkbiajzKB\n5zLc\r\n=fWeB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD37/E+s1wNYJOnijLrvVFUA8YA7GWGYm+Orxh4OQy8hgIhANUlWT2cnmTsAY9gujVcLoIUiDaZlUtpaHXq0xhDNHAu"}]},"maintainers":[{"name":"agney","email":"agney@outlook.in"}],"_npmUser":{"name":"agney","email":"agney@outlook.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-loading_0.1.2_1601831043349_0.025756036090170742"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-04T09:58:47.821Z","0.1.1":"2020-10-04T09:58:48.019Z","modified":"2022-04-04T12:00:05.882Z","0.1.2":"2020-10-04T17:04:03.454Z"},"maintainers":[{"name":"agney","email":"agney@outlook.in"}],"description":"

React Loading

Simple and Accessible loading indicators with React.

","author":{"name":"Boy with Silver Wings","email":"agney@outlook.in"},"license":"MIT","readme":"

React Loading

\n

\nSimple and Accessible loading indicators with React.\n
\n
\n\n \n\n\n
\n\n \n\n\n \"code\n\n\n \n\n\nComes bundled with React components of [Sam Herbert's animated SVG loaders](https://github.com/SamHerbert/SVG-Loaders) in a tree shakeable package.\n\n![Example of loading indicator SVGs](./example/indicator.gif)\n\n## Installation\n\n```bash\nnpm i @agney/react-loading\n# OR\nyarn add @agney/react-loading\n```\n\n[Demo](https://agneym.github.io/react-loading/)\n\n## Features\n\n- Small Size\n\n The whole library is about [20kB minified](https://bundlephobia.com/result?p=@agney/react-loading). _But you would never need the whole bundle._\n\n The library is build to be treeshakeable that when you use one or two of the bundled loaders, you would have less than 1kB in your bundle.\n\n- Accessibility\n\n Provides accessibility attributes on your loading components and containers.\n\n `aria-busy` is set to `true` on container on loading and progress indicators have `role=progressbar`.\n\n- Specify a Global loader\n\n You probably don't want loader components mixed everywhere, so you can specify a `LoaderContext` that can be overridden later if necessary.\n\n- Bring your own loader\n\n If you decide to bring your own loading indicator, library would support that as well, keeping all your logic the same.\n\n- TypeScript support. Zero extra CSS.\n\n## Usage\n\n```javascript\nimport { useLoading, Audio } from '@agney/react-loading';\n\nfunction Content() {\n const { containerProps, indicatorEl } = useLoading({\n loading: true,\n indicator:

\n {indicatorEl} {/* renders only while loading */}\n
\n );\n}\n```\n\n## Loaders\n\nThis library comes bundled with React components of [Sam Herbert's animated SVG loaders](https://github.com/SamHerbert/SVG-Loaders) in a tree shakeable package.\n\nEach loader is an SVG and all props passed shall be applied to the top SVG element. All SVGs are set to inherit `currentColor` from it's parents for fill/stroke.\n\nAvailable loaders are:\n\n```javascript\nimport {\n Audio,\n BallTriangle,\n Bars,\n Circles,\n Grid,\n Hearts,\n Oval,\n Puff,\n Rings,\n SpinningCircles,\n TailSpin,\n ThreeDots,\n} from '@agney/react-loading';\n```\n\nOnly the ones you use will be included in your bundle when you use a bundler like Webpack/Rollup.\n\n## Context\n\nYou can specify a single loading indicator reused across hooks with the `LoaderProvider`.\n\n```javascript\nimport { LoaderProvider, useLoading, BallTriangle } from '@agney/react-loading';\n\nfunction App() {\n const { containerProps, indicatorEl } = useLoading({\n loading: true,\n });\n return
{indicatorEl}
;\n}\n\nReactDOM.render(\n }>\n \n \n);\n```\n\nYou can use as many `LoaderProvider` provider elements as you like and React will pick the one closest to the hook you are rendering.\n\n[More on React Context](https://reactjs.org/docs/context.html)\n\n## Extra Props on Loader\n\nIf you want to provide specific props on a loader specifically when you use the hook:\n\n```javascript\nuseLoading({\n loading: true,\n loaderProps: {\n // Any props here would be spread on to the indicator element.\n style: {{ margin: '0 auto' }}\n }\n});\n```\n\nWe also a provide a special key for `valueText`, that will be used as description for indicator:\n\n```javascript\nuseLoading({\n loading: true,\n loaderProps: {\n valueText: 'Fetching video from the Great Internet',\n },\n});\n\n// now this will generate:\n/* */\n```\n\n`aria-valuetext` will be read by screenreaders.\n\nYou could also provide `aria-valuenow` for indicators that display progress (but the prebundled ones are best for indeterminate progress indicators)\n\n[MDN for Reference on `progressbar`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role)\n\n## Bring your own loader\n\nJust switch the import to your own loading indicator (just make sure that it accepts props)\n\n```javascript\nimport { LoaderProvider, useLoading } from '@agney/react-loading';\n\nconst Loader = ({ ...rest }) =>

Loading...

;\n\nfunction App() {\n const { containerProps, indicatorEl } = useLoading({\n loading: true,\n });\n return
{indicatorEl}
;\n}\n\nReactDOM.render(\n }>\n \n \n);\n```\n\n# Contributing\n\nAll PRs welcome.\n\n## Development\n\nWe use [`tsdx`](https://github.com/formium/tsdx) for generating boilerplate.\n\n**Install:**\n\n```bash\n# Library\nnpm i\n\n# Example\ncd example && npm i\n```\n\n**Development:**\n\n```bash\n# Running library dev\nnpm start\n\n# Running example\ncd example && npm start\n```\n\n**Testing:**\n\nTesting with `react-testing-library` and `jest`\n\n```bash\nnpm test\n```\n\nCommands are available in detail on tsdx repository.\n","readmeFilename":"README.md","homepage":"https://agneym.github.io/react-loading/","keywords":["react","typescript","loader","spinner"],"repository":{"type":"git","url":"git+https://github.com/agneym/react-loading.git"},"bugs":{"url":"https://github.com/agneym/react-loading/issues"}}